JQuery.Next() avec le sélecteur ne fonctionne pas comme prévu

Je suis en train de configurer un panneau rotatif, mais j'ai trois états: actif, inactif, désactivé.JQuery.Next() avec le sélecteur ne fonctionne pas comme prévu

Je souhaite uniquement effectuer une rotation entre les panneaux actifs et inactifs et ignorer les panneaux désactivés. S'il n'y a plus de panneaux inactifs, retournez au premier panneau. Toutefois, avec le code ci-dessous, cliquez sur le bouton pour sélectionner le panneau 1, puis sur le panneau 2 et sur le panneau 1, sans sélectionner le panneau 5. Si je supprime le sélecteur ci-dessous, cela fonctionne comme prévu. Je pense que c'est ma compréhension (ou son absence) de l'opérateur suivant. Des pensées?

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

Source

2011-12-02 grausamer_1

essayez d'utiliser les prochains frères et soeurs ~ sélecteur suivi d'un .class imbriquée, :not(.class) et :first sélecteur

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

Exemple de travail:http://jsfiddle.net/hunter/vfVBB/

Next Siblings Selector (“prev ~ siblings”)

Description de: Sélectionne tous les éléments frères qui suivent après l'élément "prev", ont le même parent, et correspondre à la filtrage "frères et sœurs" sélecteur.

Source

2011-12-02 16:55:47 hunter

Cela fonctionne mais je ne comprends pas pourquoi cela ne fonctionne pas: var NextPanel = $ (". Active"). Siblings (". Inactive: not (.disabled): first") ; –

'.siblings()' prend tous ces éléments frères, avant ou après. C'est pourquoi les 1er éléments sélectionnent le 2ème élément et le 2ème élément sélectionne le 1er. – hunter

Oui, je vois maintenant. Merci de m'avoir appris le sélecteur '~'. 10 points pour Gryffondor. Pour ceux qui sont intéressés, la documentation est ici: http://api.jquery.com/next-siblings-selector/ –

La méthode next ne retourne que le frère immédiat si elle correspond au sélecteur. Utilisez the nextAll method.

Effectuez les opérations suivantes:

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

Source

2011-12-02 16:55:10

Cela tourne juste entre panel1 et panel2. –

@ grausamer_1 Réponse mise à jour. –

Cela fonctionne aussi ... Merci pour votre temps et vos efforts! –

Encore une autre façon de le faire

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

Source

2012-01-31 21:53:07 Levitikon

JQuery.Next() avec le sélecteur ne fonctionne pas comme prévu

Répondre

Questions connexes