我试图根据旋转木马图像当时是否处于活动状态来更改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();

}

});
 
 完整示例HERE 

I am trying to change the display property of a div based on if the carousel image is active at the time. I have gotten it to work but it only works when i doubleclick. With a single click it displays the div corresponding to the previous active image instead of the current one. Please HELP.
 
=====================================
 
CODE BELOW
 
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

原文：https://stackoverflow.com/questions/27744104