DIV 표시/숨기기를위한 Javascript 루프

나는 onClick 이벤트에 의해 트리거되고 표시되고 숨기는 6 개의 DIV를 가지고 있습니다. 현재이 div를 트리거하는 6 개의 다른 그림을 클릭하면 모두 서로 위에 표시됩니다.DIV 표시/숨기기를위한 Javascript 루프

한 번에 하나의 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>

출처

2013-05-01 Mike McG

HTML과 CSS 또는 더 나은 jsFiddle을 추가 할 수 있습니까? – j08691

* 최선의 답변은 우리가 HTML을보고 (JS Fiddle) (http://jsfiddle.net/)에서 실전에서 볼 것을 요구합니다. 현재 코드는 깨끗한 접근 방식을 사용하는 대신 클래스를 추가하여 반복적 인 마크 업 문제를 해결하는 것처럼 보입니다. –

Javascript로 요소 표시의 초기 상태를 설정하는 것은 좋지 않습니다. 이러한 요소는 기본적으로 CSS로 숨겨져 있어야하며 js로 표시되어야합니다. – rlemon

이 경우 완전히 확인은 당신이거야하지만,이 같은이 작동하지 않을 수 있습니다 것입니다 :

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

출처

2013-05-01 19:07:23

저에게 감사드립니다! –

아직 단순화 작업 중이지만 작동합니다. 각 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"); 
    });

출처

2016-11-23 05:43:13

DIV 표시/숨기기를위한 Javascript 루프

답변

관련 문제