如何检查一个项目是否有三个特定的类

Trying to do an if statement that detects if a list item has the class 'about' 'active' and 'item' assigned to it. every post i have read is to check if the item has one of the three classes. i want to know when the item has all three classes. Please any help would be helpful thank you.

尝试执行if语句，以检测列表项是否有分配给它的类“about”和“item”。我读过的每一篇文章都是为了检查这个项目是否有这三个类中的一个。我想知道这个项目什么时候拥有这三个类。如果有什么帮助的话，谢谢。

This is what i have so far

这就是我目前所拥有的。

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

HERE IS THE HTML

这是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>

Here is the answer for what i was looking for, for those who might want to know.

这就是我寻找的答案，对于那些想知道的人。

    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');
        }
    });
  }

5 个解决方案

#1

As Musa's answer has already my upvote, but here's a little addition as it is was missing this case:

穆萨的回答已经得到了我的支持，但这里有一个小的补充，因为它漏掉了这个例子:

Your selector can return multiple items if the class item is present on more than one <li>-element. In this case:

如果类项存在于多个

元素中，则选择器可以返回多个项。在这种情况下:

元素中,则选择器可以返回多个项。在这种情况下:

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

will always return true if at least one element has the specific classes. If multiple entries can have the class item you can check the result in a loop like this:

如果至少有一个元素具有特定的类，它将始终返回true。如果多个条目可以有类项，您可以在如下循环中检查结果:

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

或

Another idea is to select the element directly and to get the index like this:

另一个想法是直接选择元素并得到这样的索引:

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

You can add + 1 to the key or to the statement right above if you want as both values are zero-based.

如果你想让两个值都为零，那么你可以在上面加上+ 1，或者在上面的语句中。

Demo

演示

Try before buy

试前买

Edit

编辑

It seems, that you're using Twitter BootStrap Carousel. If it is the case, you can bind the slid-event, which fires after each action (like clicking the prev/next buttons or using the navigtion). This should do the trick:

看起来，你在使用Twitter引导旋转木马。如果是这样，您可以绑定slid-event，它会在每个动作之后触发(比如单击prev/next按钮或使用navigtion)。这应该可以做到:

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

#2

Try

试一试

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

I didn't include item because it is used in the selector to select $activeItem so if an item is selected it will already have that class. If sometime later you want to test for the 3 classes when perhaps the classes of the elements could change use if ($activeItem.is('.about.active.item')){

我没有包含item，因为它在选择器中用于选择$activeItem，所以如果一个条目被选中，它就已经有这个类了。如果稍后您想要测试这3个类，也许元素的类可以使用If ($activeItem.is('.about. activity .item'))

Note is will return true if any li has the classes, if you want to test on an individual basis then

注意，如果任何li都有类，如果您想在单个基础上进行测试，则返回true

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

#3

& $activeItem.hasClass('active')

supposed to be

应该是

&& $activeItem.hasClass('active')

Condition has to use double &

条件必须使用双重&

Your if should look like this

你的if应该是这样的

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

#4

You could do this:

你可以这样做:

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

You need two & for "and" in the condition.

在这种情况下，你需要两个“和”。

This might be better:

这可能会更好:

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

Or, depending, you might be able to do this:

或者，视情况而定，你可以这样做:

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

Which would only return the item if it has the right classes to begin with.

只有在项目具有正确的类时，它才会返回该项目。

#5

-1

Try like this

这样的尝试

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

activeItem.is美元”。,.active。item”)

#1