5

尝试执行 if 语句来检测列表项是否具有分配给它的类“关于”“活动”和“项目”。我读过的每篇文章都是为了检查该项目是否具有三个类别之一。我想知道该项目何时具有所有三个类别。请任何帮助都会有所帮助，谢谢。

这就是我到目前为止所拥有的

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

5 回答 5

6

尝试

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

我没有包括item，因为它在选择器中用于选择，$activeItem所以如果选择了一个项目，它将已经具有该类。如果稍后您想测试这 3 个类，而元素的类可能会改变使用if ($activeItem.is('.about.active.item')){

如果有任何类， Noteis将返回 true li，如果您想单独测试，那么

$activeItem.each(function(){
    if ($(this).is('.about.active')) {
        alert("slide4 about is selected");
    }
});
于 2013-07-15T16:33:21.497 回答
3 
& $activeItem.hasClass('active')

应该是

&& $activeItem.hasClass('active')

条件必须使用双 &

你的 if 应该是这样的

 if ($activeItem.hasClass('about') && $activeItem.hasClass('active') 
                                   && $activeItem.hasClass('item')) {
于 2013-07-15T16:33:02.150 回答
2

正如穆萨的回答已经得到我的支持，但这里有一点补充是错过了这个案例：

如果该类item存在于多个<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上面的语句中，因为这两个值都是从零开始的。

演示

先试后买

编辑

看来，您正在使用Twitter BootStrap Carousel。如果是这种情况，您可以绑定slid-event，该事件在每个操作之后触发（例如单击上一个/下一个按钮或使用导航）。这应该可以解决问题：

$('.carousel').bind('slid', function() {
    var selected = $('ul li.active').index();
});​
于 2013-07-15T16:34:11.930 回答
1

你可以这样做：

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-15T16:36:15.707 回答
-1

像这样试试

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

于 2013-07-15T16:36:36.220 回答