如何檢查一個項目是否有三個特定的類，如果是這樣做

試圖做一個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'); 
     } 
    }); 
    }

來源

2013-07-15 Travis Michael Heller

爲什麼你需要檢查'項目？它在選擇器中。 – Barmar

由於Musa's answer有已經是我給予好評，但這裏有一個小此外，因爲它是爲缺少這種情況下：

你的選擇，如果類返回多個項目存在於多個<li> -element中。在這種情況下：

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或聲明，如果你想爲這兩個值是從零開始的。

演示

Try before buy

編輯

看來，您使用Twitter BootStrap Carousel。如果是這種情況，您可以綁定slid -event，在每個操作後觸發（例如，單擊上一個/下一個按鈕或使用導航）。這應該做的伎倆：

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

來源

2013-07-15 16:34:11 insertusernamehere

所以我還沒有找到一個工作的答案。我想我需要做一些循環遍歷列表項目，然後搜索列表項目，其中應用了以下三個類別。但是我也不太確定如何去做，因爲我所做的每一次嘗試都失敗了。 –

我看到你已經更新了這個問題。爲了得到所選'li'的號碼，請使用我的第二種方法：'var selected = $（'ol.carousel-inner li.active'）。index（）;'。例如，如果這個值是'1'而不是'about'被選中。 – insertusernamehere

所以我喜歡你使用你的邏輯使用index（）的方式，但它只在dom被加載後才運行列表，然後退出，所以如果我將索引設置爲1，它就不會提醒任何事情。因爲主頁是加載的第一個列表，所以它被設置爲0。需要一種方式，使其不斷循環有序列表項。感謝您迄今給予的幫助:) –

& $activeItem.hasClass('active')

應該是

&& $activeItem.hasClass('active')

條件必須使用雙&

你是否應該像這樣

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

來源

2013-07-15 16:33:02

嘗試

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

我不包括item，因爲它是在選擇使用如果一個項目被選中，將已經有該類選擇$activeItem左右。如果一段時間後要測試的3類時，也許是元素的類可以改變使用if ($activeItem.is('.about.active.item')){

注意is將返回true，如果任何li有類，如果你想測試一個人的基礎上再

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

來源

2013-07-15 16:33:21 Musa

你可以這樣做：

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");

，因爲這隻會回報的項目，如果有合適的班級開始與。

來源

2013-07-15 16:36:15

-1

嘗試這樣

$ activeItem.is（ '一下，。主動，.item'）

來源

2013-07-15 16:36:36

如何檢查一個項目是否有三個特定的類，如果是這樣做

回答

相關問題