以下代码

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

你可以做那样的事，

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

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

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

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

我不知道如果它的工作只是在这里写的，可以在15分钟后检查它，但也许它现在可以帮到你。

Answer 2

我不确定这是否有效，但是查看您的网站以及轮播如何工作，当图像/幻灯片切换时，应用“激活”类会有延迟。我想最新发生的是，这种延迟导致旋转木马的引导程序js与你的自定义js略有不匹配，所以当你点击时，前一张幻灯片仍处于活动状态，然后引导程序js开始并切换幻灯片，但你的js有已执行，从而导致显示的div与图像不匹配。而不是使用“活动”类来确定，尝试使用：

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

Answer 3

您可以使用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

使用hasclass为多个div与一个按钮问题

以下代码

HTML

JS / JQUERY

3 个答案: