Как проверить, есть ли у элемента три специальных класса, и если да, сделайте это

Question

Попытка выполнить оператор if, который определяет, имеет ли элемент списка класс 'about' 'active' и 'item', назначенный ему. каждое сообщение, которое я прочитал, это проверить, имеет ли элемент один из трех классов. Я хочу знать, когда элемент имеет все три класса. Пожалуйста, любая помощь была бы полезной спасибо.

Это то, что я до сих пор

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

ВОТ 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> 

Вот ответ на то, что я искал, для тех, кто мог бы хотеть знать.

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

Как Musa's answer уже имеет свою upvote, но вот немного дополнение, как это является пропускал этот случай:

Ваш селектор может возвращать несколько элементов, если класс item присутствует на более чем одном <li> -элемент. В этом случае:

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

всегда будет возвращать true, если по крайней мере один элемент имеет специфические классы. Если несколько записей может иметь класс item вы можете проверить результат в цикле, как это:

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

ИЛИ

Другая идея состоит в том, чтобы выбрать элемент непосредственно и получить индекс, как это:

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

вы можете добавить + 1 к key или заявление прямо выше, если вы хотите, как оба значения равны нулю основе.

Demo

Try before buy

Редактировать

кажется, что вы используете Twitter BootStrap Carousel. Если это так, вы можете связать slid -event, который запускается после каждого действия (например, щелчок на кнопках prev/next или с помощью навигации). Это должно сделать трюк:

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

Answer 2

& $activeItem.hasClass('active') 

должен быть

&& $activeItem.hasClass('active') 

Состояние должен использовать двойной &

Ваш, если должен выглядеть следующим образом

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

Answer 3

Попробуйте

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

я не включил item, поскольку он используется в селекторном $activeItem так, если выбран элемент будет уже иметь этот класс. Если через некоторое время вы хотите, чтобы проверить на 3-х классов, когда возможно, классы элементов могут изменить использование if ($activeItem.is('.about.active.item')){

Примечание is возвращает истину, если любой li есть классы, если вы хотите проверить на индивидуальной основе, то

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

Answer 4

Вы могли бы сделать это:

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

Вам нужно два & для "и" в состоянии.

Это может быть лучше:

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

Или, в зависимости, вы могли бы быть в состоянии сделать это:

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

Какой бы только вернуть товар, если он имеет право классы для начала ,

Answer 5

Попробуйте как этот

$ activeItem.is ('о, .active, .item')