使用 hasclass 一键处理多个 div 问题

Question

我正在尝试根据轮播图像当时是否处于活动状态来更改 div 的显示属性。我已经让它工作了，但它只有在我双击时才有效。只需单击一下，它就会显示与上一个活动图像相对应的 div，而不是当前图像。请帮忙。

======================================

代码如下

HTML

<div class="container-fluid" id="siteImgs">
  <div class="row col-xs-12 col-md-7">
<div id="myCarousel" class="carousel slide" data-ride="carousel">

  <!-- Carousel indicators -->

   <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" id="lg" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1" id="ma"></li>
    <li data-target="#myCarousel" data-slide-to="2" id="sz"></li>
    <li data-target="#myCarousel" data-slide-to="3"id="ti"></li>
   </ol>   

  <!-- Carousel items -->

 <div class="carousel-inner">
    <div class="item active">
        <img src="img/work/lookingGlass.png" alt="looking glass">
    </div>

    <div class="item">
        <img src="img/work/mauriceSite.png" alt="maurice site">
    </div>

    <div class="item">
        <img src="img/work/sza.png" alt="sza">
    </div>

    <div class="item">
        <img src="img/work/tina.png" alt="tina">
    </div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
 </a>
 </div>

</div>


<!--INFORMATION DIVS-->

<div class="row col-xs-12 col-md-5 lookingGlass lg">
      <h1>THE LOOKING GLASS</h1>
      <p>Lorem ipsum</p>
</div>

 <div class="row col-xs-12 col-md-5 lookingGlass ma">
      <h1>MAURICEDANIELS.COM</h1>
      <p>Lorem ipsum</p>
</div>

<div class="row col-xs-12 col-md-5 lookingGlass sz">
      <h1>SZA</h1>
      <p>Lorem ipsum</p>
</div>

<div class="row col-xs-12 col-md-5 lookingGlass ti">
      <h1>TINA D. PHOTOGRAPHY</h1>
      <p>Lorem ipsum</p>
</div>

JS/JQUERY

        $( '.ma' ).hide();
    $( '.sz' ).hide(),
    $( '.ti' ).hide();
$( ".carousel-control" ).click(function() {

if ( $( '#lg' ).hasClass( "active" ) ) {

    $( '.lg' ).show(),
    $( '.ma' ).hide();
    $( '.sz' ).hide(),
    $( '.ti' ).hide();

}

if ( $( '#ma' ).hasClass( "active" ) ) {

    $( '.ma' ).show(),
    $( '.lg' ).hide();
    $( '.sz' ).hide(),
    $( '.ti' ).hide();

}

if ( $( '#sz' ).hasClass( "active" ) ) {

    $( '.sz' ).show(),
    $( '.lg' ).hide();
    $( '.ma' ).hide(),
    $( '.ti' ).hide();

}

if ( $( '#ti' ).hasClass( "active" ) ) {

    $( '.ti' ).show(),
    $( '.lg' ).hide();
    $( '.sz' ).hide(),
    $( '.ma' ).hide();

}

});

Full Example HERE

Answer 1

您可以为此使用slide event。

 $('#myCarousel').on('slide.bs.carousel', function (e) {

        var index = $(e.relatedTarget).index();
        var obj = $('[data-slide-to="' + index + '"]').attr('id');

        $('.lookingGlass').hide();        // all individual hide() that you had in your code can be replaced by targeting the divs with class

        $('.' + obj).show();
  })

Fiddle demo

另一种方法是从轮播指示器中删除 id，并将其作为数据属性添加到 div.item 类似 <div class="item" data-target="lg"> 并像这样使用它

 $('#myCarousel').on('slide.bs.carousel', function (e) {
        var obj = $(e.relatedTarget).data('target');
        $('.lookingGlass').hide();
        $('.' + obj).show();
  })

Demo fiddle

Answer 2

你可以这样做，

$( ".carousel-control" ).click(function() {
  $(".carousel-indicators").each(function(){

    var idActive = $(this).attr("id");

    if($(".lookingGlass ").hasClass("idActive ")){
         $(this).show();

    }
     $(".lookingGlass").hide();
  });
});

如果它可以工作，我不会，我只是在这里写的，从现在开始 15 分钟后可以检查它，但也许它现在对你有帮助。

Answer 3

我不确定这是否可行，但查看您的网站以及轮播的工作方式，当图像/幻灯片切换时，应用“活动”类会出现延迟。我认为发生的事情是这种延迟导致轮播的引导 js 与您的自定义 js 有点不匹配，因此当您单击时，上一张幻灯片仍然处于活动状态，然后引导 js 启动并切换幻灯片，但是您的 js 有已执行，从而导致 div 与显示的图像不匹配。而不是使用“活动”类来确定，尝试使用：

if ($('#ti').hasClass("next") || $('#ti').hasClass("prev") {
    // do stuff here
}