Question

我有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>

Answer 1

不完全确定这是否适合您，但这样的事情可能有效：

<强> 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 -->

<强> JQuery的：

$("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
});

WORKING EXAMPLE

Answer 2

我仍在努力简化它，但它确实有效。您将不得不重复每个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");
    });

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

2 个答案: