5

リスト項目にクラス「about」「active」および「item」が割り当てられているかどうかを検出する if ステートメントを実行しようとしています。私が読んだすべての投稿は、アイテムが3つのクラスのいずれかを持っているかどうかを確認することです. アイテムが 3 つのクラスすべてを持っている時期を知りたいです。どんな助けでも役に立ちます、ありがとうございます。

これは私がこれまでに持っているものです

     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')){

個別にテストしたい場合は、クラスがあるis場合は 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')

条件はdouble &を使用する必要があります

あなたの場合は次のようになります

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

Musaの答えにはすでに私の賛成票がありますが、ここに少し追加がありますはこのケースがありませんでした:

itemクラスが複数の要素に存在する場合、セレクターは複数のアイテムを返すことができます<li>。この場合：

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

true少なくとも 1 つの要素が特定のクラスを持っている場合は常に返されます。複数のエントリがクラス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 に答える