通过一个按钮将 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

你可以这样做，

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

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

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

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

我不知道它是否会起作用只是写在这里，从现在起 15 分钟后可以检查它，但也许它现在对你有帮助。

Answer 2

我不确定这是否有效，但查看您的网站以及轮播的工作方式，class "active" 应用有延迟 images/slides 正在切换。我认为发生的事情是这种延迟导致轮播的 bootstrap js 与您的自定义 js 有点不匹配，因此当您单击时，上一张幻灯片仍然处于活动状态，然后 bootstrap js 开始并切换幻灯片，但您的 js 已经执行，从而导致显示的 div 与图像不匹配。不要使用 "active" class 来确定，尝试使用：

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 问题

using hasclass for multiple divs with one button Problems

html

javascript

jquery

carousel

twitter-bootstrap

代码如下

HTML

JS/JQUERY