javascript - 引导 slider : when a specific slide is active show or hide divs

Question

我定义了一个轮播幻灯片，我想获取事件幻灯片，所以我想检查第二张幻灯片是否处于事件状态，我想显示一个包含一些文本的 div 并隐藏第二张幻灯片上的下一个箭头正确的。当第一张幻灯片处于事件状态时，我想隐藏 div 并显示右箭头。

我的JSFIDDLE

这是我的 HTML 代码:

<div id="imagesCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
      <ol class="carousel-indicators">
        <li data-target="#imagesCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#imagesCarousel" data-slide-to="1"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <div class="container-fluid">
            <div class="row">
              <img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg">
              <img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg">
            </div>
          </div>
        </div>
        <div class="item check" >
          <div class="container-fluid">
            <div class="row">
              <img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589722k.jpg">
              <img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589722k.jpg" >
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#imagesCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#imagesCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

<div class="features-text" style="display:none;">
This is displayed only when second slide is active
</div>

和我的 jquery 代码:

if($('#imagesCarousel .carousel inner').children('.check').hasClass('active')) {
    $('.features-text').css('display', 'block');
    $('.glyphicon-chevron-right').css('display', 'none');
}

为什么这不起作用？救命!

Answer 1

html如下:我在文档中添加了一些id。

<div id="imagesCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div id="text"></div>
      <ol class="carousel-indicators">
        <li data-target="#imagesCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#imagesCarousel" data-slide-to="1"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <div class="container-fluid">
            <div class="row">
              <img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg">
              <img  class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589699k.jpg">
              <div class="carousel-caption">
                slide1
              </div>
            </div>
          </div>
        </div>
        <div id="item2" class="item check" >
          <div class="container-fluid">
            <div class="row">
              <img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589722k.jpg">
              <img class="col-xs-6 crsl-img" src="http://i.telegraph.co.uk/multimedia/archive/03589/Wellcome_Image_Awa_3589722k.jpg" >
                            <div class="carousel-caption">
                slide2
              </div>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#imagesCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#imagesCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

<div id="text2" class="features-text hidden" style="">
This is displayed only when second slide is active
</div>

js如下:

$('#text').html($('.active > .carousel-caption').html());
  $('.carousel').on('slid.bs.carousel', function() {
    if ($('#item2').hasClass('active')) {
     # item2 is active, just remove hidden attr of text2 to show the text2.
     $('#text2').removeClass('hidden');
    } else {
     $('#text2').addClass('hidden');
    }
  });