用于显示/隐藏div的Javascript循环

我有6个显示和隐藏的div，由onClick事件触发。当前，如果您单击触发这些div的6个不同图片，它们都会显示在彼此的顶部

我希望一次只出现一个DIV。因此，当您单击其他图像时，它会隐藏当前显示的div并显示新的div

我猜我需要以某种方式通过这些循环，有人能给我指出正确的方向吗？我的代码：

<script type="text/javascript">

        $(document).ready(function () {

            $(".slidingDiv").hide();
            $(".show_hide").show();
            $('.show_hide').click(function () {
                $(".slidingDiv").slideToggle();
            });

            $(".slidingDiv2").hide();
            $(".show_hide2").show();
            $('.show_hide2').click(function () {
                $(".slidingDiv2").slideToggle();
            });

            $(".slidingDiv3").hide();
            $(".show_hide3").show();
            $('.show_hide3').click(function () {
                $(".slidingDiv3").slideToggle();
            });

            $(".slidingDiv4").hide();
            $(".show_hide4").show();
            $('.show_hide4').click(function () {
                $(".slidingDiv4").slideToggle();
            });

            $(".slidingDiv5").hide();
            $(".show_hide5").show();
            $('.show_hide5').click(function () {
                $(".slidingDiv5").slideToggle();
            });

            $(".slidingDiv6").hide();
            $(".show_hide6").show();
            $('.show_hide6').click(function () {
                $(".slidingDiv6").slideToggle();
            });
        });

    </script>

$（文档）.ready（函数（）{
$（“.slidingDiv”）.hide（）；
$（“.show_hide”）.show（）；
$（'.show_hide'）。单击（函数（）{
$（“.slidingDiv”）.slideToggle（）；
});
$（“.slidingDiv2”）.hide（）；
$（“.show_hide2”）.show（）；
$（'.show_hide2'）。单击（函数（）{
$（“.slidingDiv2”）.slideToggle（）；
});
$（“.slidingDiv3”）.hide（）；
$（“.show_hide3”）.show（）；
$（'.show_hide3'）。单击（函数（）{
$（“.slidingDiv3”）.slideToggle（）；
});
$（“.slidingDiv4”）.hide（）；
$（“.show_hide4”）.show（）；
$（'.show_hide4'）。单击（函数（）{
$（“.slidingDiv4”）.slideToggle（）；
});
$（“.slidingDiv5”）.hide（）；
$（“.show_hide5”）.show（）；
$（'.show_hide5'）。单击（函数（）{
$（“.slidingDiv5”）.slideToggle（）；
});
$（“.slidingDiv6”）.hide（）；
$（“.show_hide6”）.show（）；
$（'.show_hide6'）。单击（函数（）{
$（“.slidingDiv6”）.slideToggle（）；
});
});

不完全确定这是否是您的目标，但类似的方法可能会奏效：

HTML:

<img class="div1" src=...>
<img class="div2" src=...>
<img class="div3" src=...>
<!-- more images can go here -->

<div class="div1">text1</div>
<div class="div2">text2</div>
<div class="div3">text3</div>
<!-- more divs to display go here -->

$("img").click(function () {
    $("div").slideUp(190);                      // hide divs previously shown
    var divSelect = $(this).attr('class');      // get class of div to show
    $("div."+divSelect).delay(200).slideDown(); // show div after other slides up
});

---

我仍在努力简化它，但它确实有效。您必须对每个div重复该操作，并给出不同的选择器名称。当我想出一个循环，我会让你知道

祝你好运

<!--HTML starts-->              

<div class="med-wrap-video">
    <div> <p class="body-text"> <iframe width="100%" height="100%" src="https://www.youtube.com/embed/6z9KMHt-Ta4" frameborder="1" allowfullscreen> </iframe>
      <br>
        <a href="#" class=".a selector">Read More</a></p>

     <br>
        <span class="selector1">

          <p class="body-text">
            Title: <br>
            Composer: <br>
            Year: <br>
         </p>
       </span>

  </div>    
</div>

<!--JS begins-->    

$(document).ready(function(){

$(".selector1").hide();        

$(".a selector").click(function(event){    
 event.preventDefault();           //prevents page to reload
$(".selector1").slideToggle(600);
      $(this).toggleClass(".selector1");
    });

标题：

作曲家：

年份：


$（文档）.ready（函数（）{
$（“.selector1”）.hide（）；
$（“.a选择器”）。单击（函数（事件）{
event.preventDefault（）；//防止重新加载页面
$（“.selector1”）。滑动切换（600）；
$（this.toggleClass（“.selector1”）；
});

您可以添加HTML和CSS，或者更好的是添加JSFIDLE吗？正如所暗示的，最好的答案要求我们查看HTML和CSS（理想情况下）请参阅；您当前的代码似乎通过添加更多类而不是使用干净的方法来解决重复标记的问题。使用Javascript设置元素显示的初始状态是一个非常糟糕的主意。默认情况下，这些元素应该使用css隐藏，然后使用js显示。@rlemon:除非用户的disabled JavaScript（我知道，我知道：一个神话般的野兽…！），这会阻止任何人看到内容。如果要使用JavaScript显示，请使用JavaScript隐藏。如果用户已禁用JS，并且您的站点要求JS可用，则应该有相应的

消息（有点像这样，但是看起来消息是从服务器发送的？）否则，如果是状态驱动的，用户可以向服务器提交请求，服务器可以用包含您希望显示的特定标记的页面进行响应。（我的2美分）