Wie überprüft man, ob ein Artikel drei spezifische Klassen hat, und wenn dies der Fall ist

Question

Versuch, eine if-Anweisung auszuführen, die erkennt, ob einem Listenelement die Klasse 'über' 'aktiv' und 'Element' zugewiesen ist. Jeder Beitrag, den ich gelesen habe, soll überprüfen, ob der Artikel eine der drei Klassen hat. Ich möchte wissen, wann der Gegenstand alle drei Klassen hat. Bitte jede Hilfe wäre hilfreich, danke.

Das ist, was ich

 var $activeItem = $("#project05 ol.carousel-inner li.item"); 
    if ($activeItem.hasClass('about') & $activeItem.hasClass('active') & $activeItem.hasClass('item')) { 
     alert("slide4 about is selected"); 
    } 

Hier ist der HTML

<div id="project05" class="carousel slide">    
       <!-- Carousel items --> 
       <ol class="carousel-inner"> 
       <li class="item home active"> 
       </li> 
       <li class="item about"> 
       </li> 
       <li class="item solutions"> 
       </li> 
       <li class="item approach"> 
       </li> 
       </ol> 
       <!-- Carousel nav --> 
       <ol class="carousel-linked-nav"> 
       <li class="active"><a href="#1">Home</a></li> 
       <li><a href="#2">About</a></li> 
       <li><a href="#3">Solutions</a></li> 
       <li><a href="#4">Approach</a></li> 
       </ol> 
       <a class="carousel-control left" href="#project05" data-slide="prev">&lsaquo;</a> 
       <a class="carousel-control right" href="#project05" data-slide="next">&rsaquo;</a> 
      </div> 

hier so weit haben, ist die Antwort für das, was ich suchte, für diejenigen, die wissen wollen könnte.

function carouselSlide() { 
    $('#exterior-page .carousel').bind('slid', function() { 
     $('#exterior-page.carousel-linked-nav .active').removeClass('active'); 
     var idx = $('#exterior-page .carousel .item.active').index(); 
     $('#exterior-page .carousel-linked-nav li:eq(' + idx + ')').addClass('active'); 
     if(idx === 0) { 
      // alert("home page"); 
      $("#main-nav").removeClass(); 
      $("#main-nav").addClass('home-color'); 
     } 
     else if(idx === 1) { 
      // alert("about page"); 
      $("#main-nav").removeClass(); 
      $("#main-nav").addClass('about-color'); 
     } 
     else if(idx === 2) { 
      // alert("solutions page"); 
      $("#main-nav").removeClass(); 
      $("#main-nav").addClass('solutions-color'); 
     } 
     else if(idx === 3) { 
      // alert("approach page"); 
      $("#main-nav").removeClass(); 
      $("#main-nav").addClass('approach-color'); 
     } 
    }); 
    } 

Answer 1

wie Musa's answer hat bereits mein upvote, aber hier ist ein kleiner Zusatz, wie es ist fehlte diesen Fall:

Ihre Wähler mehrere Artikel, wenn die Klasse zurückkehren können item ist auf mehr als einem <li> -Element vorhanden. In diesem Fall:

if ($activeItem.is('.about.active')) {} 

immer true zurück, wenn mindestens ein Element der spezifischen Klassen hat. Wenn mehrere Einträge können die Klasse haben item Sie das Ergebnis in einer Schleife wie folgt überprüfen:

$.each($activeItem, function(key, value) { 
    if ($(value).is('.active')) { 
     alert ('Slide ' + key + ' is selected'); 
    } 
}); 

ODER

Eine weitere Idee ist es, das Element direkt zu wählen und den Index wie folgt zu erhalten:

var selected = $('ul li.active').index(); 

Sie + 1 zum key oder der Erklärung rechts oben hinzufügen können, wenn Sie wollen, da beide Werte auf Null basieren.

Demo

Try before buy

bearbeiten

Es scheint, dass Sie Twitter BootStrap Carousel verwenden. Wenn dies der Fall ist, können Sie den slid -Event binden, der nach jeder Aktion ausgelöst wird (wie das Klicken auf die Schaltflächen "Zurück"/"Weiter" oder "Verwenden der Navigation"). Dies sollte den Trick:

$('.carousel').bind('slid', function() { 
    var selected = $('ul li.active').index(); 
});​ 

Answer 2

& $activeItem.hasClass('active') 

sein soll

&& $activeItem.hasClass('active') 

Zustand zu verwenden, hat Doppel &

Ihre wenn sollte wie folgt aussehen

if ($activeItem.hasClass('about') && $activeItem.hasClass('active') 
            && $activeItem.hasClass('item')) { 

Answer 3

Versuche

if ($activeItem.is('.about.active')) { 
    alert("slide4 about is selected"); 
} 

ich nicht item enthalten, weil es in dem Selektor verwendet wird $activeItem so zu wählen, wenn ein Element ausgewählt wird, wird es bereits diese Klasse hat. Wenn irgendwann später wollen Sie für die drei Klassen testen, wenn vielleicht die Klassen der Elemente if ($activeItem.is('.about.active.item')){

Hinweis Verwendung ändern könnten is gibt true zurück, wenn ein li die Klassen hat, wenn Sie auf individueller Basis testen wollen, dann

$activeItem.each(function(){ 
    if ($(this).is('.about.active')) { 
     alert("slide4 about is selected"); 
    } 
}); 

Answer 4

Sie dies tun könnte:

var $activeItem = $("#project05 ol.carousel-inner li.item"); 
if ($activeItem.hasClass('about') && $activeItem.hasClass('active') && $activeItem.hasClass('item')) { 
    alert("slide4 about is selected"); 
} 

Sie benötigen zwei & für "und" in den Zustand.

Dies könnte besser sein:

if ($activeItem.is('.about.active.item')) { 
    alert("slide4 about is selected"); 
} 

Oder abhängig, können Sie möglicherweise, dies zu tun:

var $activeItem = $("#project05 ol.carousel-inner li.item.active.about"); 

der das Element nur zurückkehren würde, wenn es die richtigen Klassen hat zu beginnen .

Answer 5

Versuchen Sie, wie dieses

$ activeItem.is ('über, .active, .item')