JQuery.Next() z nie selektorem nie działa zgodnie z oczekiwaniami

Próbuję ustawić obrotowy panel, jednak mam trzy stany: aktywny, nieaktywny, wyłączony.JQuery.Next() z nie selektorem nie działa zgodnie z oczekiwaniami

Chcę tylko obracać między panelami aktywnymi i nieaktywnymi oraz pomijam wyłączone panele. Jeśli nie ma już nieaktywnych paneli, obróć się z powrotem do pierwszego panelu.

Jednak za pomocą poniższego kodu klikniesz przycisk, który wybierze panel1, następnie panel 2, i powróci do panelu 1, bez wybierania panelu5. Jeśli usuniemy nieprzedziernik z pogrubionej części poniżej, działa on zgodnie z oczekiwaniami. Myślę, że to moje zrozumienie (lub jego brak) następnego operatora. jakieś pomysły?

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

Źródło

2011-12-02 grausamer_1

spróbuj kolejne rodzeństwo ~ selektor następnie zagnieżdżonego .class, :not(.class) i :first selektora

$("#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"); 
});

przykład praca:http://jsfiddle.net/hunter/vfVBB/

Next Siblings Selector (“prev ~ siblings”)

Opis: wybór wszystkich elementów rodzeństwem, które następują po "prev" element mają taką samą macierzystego, i mecz filtrowanie selektora "rodzeństwa".

Źródło

2011-12-02 16:55:47 hunter

Działa to, ale nie rozumiem, dlaczego to nie działa: var NextPanel = $ (".aktywny"). Rodzeństwo (".inaktywny: nie (.disabled): pierwszy") ; –

'.siblings()' bierze wszystkie elementy rodzeństwa przed lub po. Dlatego pierwsze elementy wybierają drugi element, a drugi element wybiera pierwszy. – hunter

Tak, teraz widzę. Dzięki za nauczenie mnie selektora "~". 10 punktów dla gryffindoru. Dla zainteresowanych dokumentacja znajduje się tutaj: http://api.jquery.com/next-siblings-selector/ –

Sposób next zwraca tylko natychmiastowe rodzeństwo czy pasuje selektora. Użyj the nextAll method.

Spróbuj wykonać następujące czynności:

$("#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.

Źródło

2011-12-02 16:55:10

To właśnie obraca między Panel1 i panel2. –

@ grausamer_1 Odpowiedź zaktualizowana. –

To też działa ... Dziękujemy za poświęcony czas i wysiłek! –

Jeszcze innym sposobem, aby to zrobić

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

Źródło

2012-01-31 21:53:07 Levitikon

JQuery.Next() z nie selektorem nie działa zgodnie z oczekiwaniami

Odpowiedz

Powiązane problemy