J'essaie de configurer un panneau rotatif, mais j'ai trois états : actif, inactif, désactivé.
Je veux seulement faire pivoter les panneaux actifs et inactifs et ignorer les panneaux désactivés. S'il n'y a plus de panneaux inactifs, revenir au premier panneau.
Cependant, avec le code ci-dessous, si vous cliquez sur le bouton, le panneau 1 est sélectionné, puis le panneau 2, et de nouveau le panneau 1, sans sélectionner le panneau 5. Si je retire le sélecteur not de la partie en gras ci-dessous, cela fonctionne comme prévu. Je pense que c'est ma compréhension (ou le manque de compréhension) de l'opérateur suivant. Avez-vous des idé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>
