Question

我正在使用bootstrap的幻灯片，我真的很困惑为什么下面的代码不起作用。基本上，我正在寻找一个div是否有一个类，如果是这样做一个div fadeIn。目前它仅适用于第二张幻灯片。在每一张幻灯片上，div已经存在。我的猜测是因为它们共享同一个类，但这对我没有意义，因为如果父类具有“活动”类，则条件状态仅为fadeIn。

如果有人能向我解释发生了什么，我会非常感激。

 <div id="myCarousel" class="carousel slide">

              <!-- Carousel items -->
              <div class="carousel-inner">

                <div class="active item st-cheeseBacon">

                  <div class="col-sm-4 col-sm-push-7">
                    <div class="st-carouselTitle show">
                     <h3>Bacon &amp; Cheddar Mash</h3>
                    </div>
                  </div>

                </div>

                <div class="item st-chipotle">

                  <div class="col-sm-4 col-sm-push-7">
                    <div class="st-carouselTitle">
                     <h3 > Chipotle &amp; Cilantro Mash</h3>
                    </div>
                  </div>

                </div>

                <div class="item st-pesto">

                  <div class="col-sm-4 col-sm-push-7">
                    <div class="st-carouselTitle">
                     <h3>Pesto Mash</h3>
                    </div>
                  </div>

                </div>
               ...
              <!-- Carousel nav -->
              <a class="carousel-control left arrowBack" href="#myCarousel" data-slide="prev">
                <div class="arrowBack"></div>
              </a>
              <a class="carousel-control right arrowNext" href="#myCarousel" data-slide="next">
                <div class="arrowNext"></div>  
              </a>

              <h3 class="recipeNum">- 1 of 17 -</h3>

            </div>

$(function(){
 $('.arrowNext').click(function (){
     if($('div.item').hasClass('active')){
         var x = $('div.item').find('.st-carouselTitle').fadeIn(1500);

     } else {
          x = $('.st-carouselTitle').hide();
     }

     console.log(x);
 });
});

Answer 1

你能通过css而不是js来实现你的目标吗？

.st-carouselTitle{    
  opacity:0;
}
.active .st-carouselTitle{
 opacity:1;
 transition:opacity 1.5s linear;
}

jsfiddle

HasClass（）仅适用于第二张幻灯片

1 个答案: