JQuery.Next（）与非选择器不按预期工作

我想设置一个旋转面板，但我有三个状态：活动，非活动，禁用。JQuery.Next（）与非选择器不按预期工作

我只想在活动面板和非活动面板之间旋转并跳过禁用的面板。如果没有更多不活动的面板旋转回第一个面板。

但是，在下面的代码中，单击该按钮，它将选择panel1，然后选择panel 2，然后返回到panel 1，而不是选择panel5。如果我从下面的粗体部分中删除非选择器，则按预期工作。我认为这是我对下一个运营商的理解（或缺乏）。有什么想法吗？

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function() { 
     $("#rotate").click(function() { 
      var ActivePanel = $('.active');     //Get the current active panel 
      var NextPanel = $('.active').next('.inactive:not(.disabled)'); //Get the next panel to be active. 
      if (NextPanel.length == 0) NextPanel = $("#panel1"); //check for null next. if so, rotate back to the first panel 

      console.log("Active Panel: ", ActivePanel); 
      console.log("Next Panel: ", NextPanel); 

      $(ActivePanel).removeClass("active").addClass("inactive"); 
      $(NextPanel).removeClass("inactive").addClass("active"); 
     }); 
    });  
    </script> 
</head> 
<body> 
    <button id="rotate">Rotate Active Panel</button> 
    <div id="panel1" class="active"><p>Some Content</p></div> 
<div id="panel2" class="inactive"></div> 
<div id="panel3" class="inactive disabled"></div> 
<div id="panel4" class="inactive disabled"></div> 
<div id="panel5" class="inactive"></div> 
</body> 
</html>

来源

2011-12-02 grausamer_1

尝试使用下一个兄弟姐妹，然后一个嵌套.class，:not(.class)和:first选择

$("#rotate").click(function() { 
    var ActivePanel = $('.active'); 
    var NextPanel = $(".active ~ .inactive:not(.disabled):first"); 
    if (NextPanel.length == 0) NextPanel = $("#panel1");  
    $(ActivePanel).removeClass("active").addClass("inactive"); 
    $(NextPanel).removeClass("inactive").addClass("active"); 
});

选择

工作实施例：http://jsfiddle.net/hunter/vfVBB/

Next Siblings Selector (“prev ~ siblings”)

描述：选择 “PREV” 元素之后跟随，具有相同的父，并匹配所有同级元素过滤“兄弟姐妹”选择器。

来源

2011-12-02 16:55:47 hunter

这个工程，但我不明白为什么这不起作用：var NextPanel = $（“。active”）。siblings（“。inactive：not（.disabled）：first”） ; –

'.siblings（）'在所有的元素之前或之后都有这个元素。这就是为什么第一个元素选择第二个元素而第二个元素选择第一个元素。 – hunter

是的，我现在看到。谢谢你教我'〜'选择器。格兰芬多10分。对于那些感兴趣的文档在这里：http://api.jquery.com/next-siblings-selector/ –

next方法只会返回即时兄弟，如果它匹配选择器。使用the nextAll method.

尝试以下操作：

$("#rotate").click(function() { 
    var activePanel = $('.active'); //Get the current active panel 
    var nextPanel = activePanel.nextAll('.inactive').not('.disabled').first(); //Get the next panel to be active. 
    if (!nextPanel.length) { 
    nextPanel = $("#panel1"); //check for null next. if so, rotate back to the first panel 
    } 

    console.log("Active Panel: ", activePanel); 
    console.log("Next Panel: ", nextPanel); 

    $(activePanel).removeClass("active").addClass("inactive"); 
    $(nextPanel).removeClass("inactive").addClass("active"); 
});

See here for jsFiddle.

来源

2011-12-02 16:55:10

这只是PANEL1和是Panel2之间旋转的另一种方式。 –

@ grausamer_1回答更新。 –

This works too ...感谢您的时间和精力！ –

然而，做到这一点

.nextAll(".inactive:not(.disabled):first")

来源

2012-01-31 21:53:07 Levitikon

JQuery.Next（）与非选择器不按预期工作

回答

相关问题