javascript - 在Bootstrap Carousel中单击时显示多个div

DEMO JSFiddle

我试图在单击按钮时显示多个div。例如，我只想单击Button1时显示id = div1的所有div。同样，仅在单击Button2时显示id = div2的所有div。其他幻灯片的数量也越来越多。

HTML：

<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <div class="divA">
          <div class="divAA">
            <div id="div1" class="targetDiv">
              <p>Div1 Intro: Hidden until Button1 is clicked</p>
            </div>
          </div>
          <p>
            Div1 Short to be shown by default.
            <span id="div1" class="targetDiv">Hidden span until Button1 is clicked</span>
          </p>
          <a class="showSingle" target="1">Button1</a>
          <div class="divAAA">
            <div id="div1" class="targetDiv">
              <p>
                Div1 Details: Hidden until Button1 is clicked.
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="item">
        <div class="divB">
          <div class="divBB">
            <div id="div2" class="targetDiv">
              <p>Div2 Intro: Hidden until Button1 is clicked
              <span id="div2" class="targetDiv">Hidden span until Button1 is clicked</span>
              </p>
            </div>
          </div>
          <p>
            Div2 Short
          </p>
          <a class="showSingle" target="2">Button2</a>
          <div id="div2" class="targetDiv">
            <p>
              Div2 Details: Hidden until Button2 is clicked. Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked. YOLO.
            </p></div>
        </div>
      </div>

      <div class="item">
        3
      </div>

      <div class="item">
        4
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

Javascript：

jQuery(function(){
        jQuery('.showSingle').click(function(){
              jQuery('.targetDiv').hide();
              jQuery('#div'+jQuery(this).attr('target')).show();
        });
});

最佳答案

您不能对多个元素使用相同的ID。您需要将ID更改为class。

最初可以使用CSS-display:none隐藏它们，然后单击按钮可以使用类选择器而不是id选择器显示它们。

这是更改后的代码。

如果您喜欢小提琴：https://jsfiddle.net/ga6gmy8m/2/

jQuery(function(){
        jQuery('.showSingle').click(function(){
              jQuery('.targetDiv').hide();
             jQuery(this).hide(); jQuery('.div'+jQuery(this).attr('target')).show();
        });
});

.carousel {
  height: 200px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.item {
  text-align: center;
}
.div2,.div1{
  display:none;
}
.showSingle {
  border: 1px solid #000;
  padding: 5px 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <div class="divA">
          <div class="divAA">
            <div class="div1" class="targetDiv">
              <p>Div1 Intro: Hidden until Button1 is clicked</p>
            </div>
          </div>
          <p>
            Div1 Short to be shown by default.
            <span class="div1" class="targetDiv">Hidden span until Button1 is clicked</span>
          </p>
          <a class="showSingle" target="1">Button1</a>
          <div class="divAAA">
            <div class="div1" class="targetDiv">
              <p>
                Div1 Details: Hidden until Button1 is clicked.
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="item">
        <div class="divB">
          <div class="divBB">
            <div class="div2" class="targetDiv">
              <p>Div2 Intro: Hidden until Button1 is clicked
              <span class="div2" class="targetDiv">Hidden span until Button1 is clicked</span>
              </p>
            </div>
          </div>
          <p>
            Div2 Short
          </p>
          <a class="showSingle" target="2">Button2</a>
          <div class="div2" class="targetDiv" style="display:none">
            <p>
              Div2 Details: Hidden until Button2 is clicked. Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked.Div2 Details: Hidden until Button2 is clicked. YOLO.
            </p></div>
        </div>
      </div>

      <div class="item">
        3
      </div>

      <div class="item">
        4
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>