Question

我正在尝试设置一个旋转面板，但我有三种状态：活动，非活动，禁用。

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

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

<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>

Answer 1

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.

Answer 2

尝试使用下一个兄弟~选择器，然后使用嵌套的.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”元素后面的所有兄弟元素，具有相同的父元素，并匹配过滤“兄弟姐妹”选择器。

Answer 3

另一种方法

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

没有选择器的JQuery.Next（）没有按预期工作

3 个答案: