Come verificare se un articolo ha tre classi specifiche e in tal caso fare questo

Question

Cercando di fare un'istruzione if che rileva se una voce di elenco ha la classe 'about' 'active' e 'item' assegnata ad essa. ogni post che ho letto è per verificare se l'articolo ha una delle tre classi. Voglio sapere quando l'oggetto ha tutte e tre le classi. Per favore qualsiasi aiuto sarebbe utile, grazie.

Questo è quello che ho finora

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

Ecco l'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> 

Ecco la risposta per quello che stavo cercando, per coloro che potrebbero voler sapere.

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

come Musa's answer ha già la mia upvote, ma ecco una piccola aggiunta in quanto è mancava questo caso:

vostro selettore può restituire più voci se la classe item è presente su più di uno <li> -elemento. In questo caso:

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

ritorneranno sempre true se almeno un elemento ha le classi specifiche. Se più voci possono avere la classe item è possibile verificare il risultato in un ciclo come questo:

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

O

Un'altra idea è quella di selezionare l'elemento direttamente e per ottenere l'indice di come questo:

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

È possibile aggiungere + 1 al key o la dichiarazione proprio sopra se si desidera come entrambi i valori sono a base zero.

Demo

Try before buy

Modifica

Sembra, che si sta utilizzando Twitter BootStrap Carousel. In tal caso, è possibile associare l'evento slid, che viene attivato dopo ogni azione (ad esempio facendo clic sui pulsanti prev/next o utilizzando la navigazione). Questo dovrebbe fare il trucco:

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

Answer 2

& $activeItem.hasClass('active') 

doveva essere

&& $activeItem.hasClass('active') 

condizione deve utilizzare doppia &

vostro se dovrebbe assomigliare a questo

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

Answer 3

Prova

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

non ho incluso item perché è usato nel selettore per selezionare $activeItem quindi se un elemento è selezionato sarà già quella classe. Se qualche tempo dopo si vogliono testare per le 3 classi in cui forse le classi degli elementi potrebbero cambiare l'uso if ($activeItem.is('.about.active.item')){

Nota is restituirà true se uno li ha le classi, se si desidera verificare su base individuale poi

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

Answer 4

Si potrebbe fare questo:

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

avete bisogno di due & per "e" nella condizione.

Questo potrebbe essere migliore:

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

Oppure, a seconda, si potrebbe essere in grado di fare questo:

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

Quale sarebbe tornato soltanto l'oggetto se ha le classi giuste per cominciare .

Answer 5

Prova come questo

$ activeItem.is ('A proposito, .active, .item')