Javascript 在引导转盘中单击时显示多个div

我试图在单击按钮时显示多个div。例如，我只想在单击按钮1时显示id=div1的所有div。同样，仅当单击按钮2时才显示id=div2的所有div。其他幻灯片的数量也在不断增加

HTML:

---

为单击div时要显示的元素（div）分配一个类。创建一个可以分配给这些div的类。请记住，不要将相同的ID分配给元素，因为这可能是一个问题

为要在单击div时显示的元素（div）分配一个类。创建一个可以分配给这些div的类。请记住，不要将相同的ID分配给元素，因为这可能是一个问题

不能对多个元素使用同一id。您需要将id更改为类

最初可以使用CSS隐藏它们-

显示：无

，然后单击按钮，可以使用类选择器而不是id选择器来显示它们

这是更改后的代码

如果您喜欢小提琴：

jQuery（函数（）{
jQuery（'.showSingle'）。单击（函数（）{
jQuery（'.targetDiv'）.hide（）；
jQuery（this.hide（）；jQuery（'.div'+jQuery（this.attr（'target'））.show（）；
});
});
.carousel{
高度：200px；
溢出x：隐藏；
溢出y：滚动；
}
.项目{
文本对齐：居中；
}
.div2、.div1{
显示：无；
}
.单曲{
边框：1px实心#000；
填充物：5px10px；
光标：指针；
}

第1部分简介：在单击按钮1之前隐藏


默认情况下，将显示Div1 Short。
隐藏跨度，直到单击按钮1

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

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

这是更改后的代码

如果您喜欢小提琴：


jQuery（函数（）{
jQuery（'.showSingle'）。单击（函数（）{
jQuery（'.targetDiv'）.hide（）；
jQuery（this.hide（）；jQuery（'.div'+jQuery（this.attr（'target'））.show（）；
});
});
.carousel{
高度：200px；
溢出x：隐藏；
溢出y：滚动；
}
.项目{
文本对齐：居中；
}
.div2、.div1{
显示：无；
}
.单曲{
边框：1px实心#000；
填充物：5px10px；
光标：指针；
}

第1部分简介：在单击按钮1之前隐藏


默认情况下，将显示Div1 Short。
隐藏跨度，直到单击按钮1

它正在工作！问题是什么？不，它工作不正常。当前，单击相应按钮时，仅显示1个div，而不是3个div。另外，在单击按钮之前，3 div将保持隐藏状态。我只想在单击按钮1时显示id=div1的所有div。。。Id必须是唯一的，请使用class代替。不能对多个元素使用相同的Id。使用类而不是元素。您能在更新的JSFIDLE上编辑并显示给我吗？它正在工作！问题是什么？不，它工作不正常。当前，单击相应按钮时，仅显示1个div，而不是3个div。另外，在单击按钮之前，3 div将保持隐藏状态。我只想在单击按钮1时显示id=div1的所有div。。。Id必须是唯一的，请使用class代替。不能对多个元素使用相同的Id。使用类而不是元素。你能在更新的JSFIDLE上编辑并显示给我吗？太棒了！顺便说一句，我们可以在点击时隐藏“buttonX”吗？一旦它出现，它似乎没有任何用途：）是的，我已经更新了代码。您可以使用
jQuery（this.hide（）<代码>此
始终指在其上执行操作的元素。太棒了！顺便说一句，我们可以在点击时隐藏“buttonX”吗？一旦它出现，它似乎没有任何用途：）是的，我已经更新了代码。您可以使用
jQuery（this.hide（）<代码>此
始终引用对其执行操作的元素。非常感谢：）我使用其他解决方案使其工作。非常感谢：）我使用其他解决方案使其工作。
<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>

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