jquery를 사용하여 특정 div를 전환하는 방법

Question

좋아요. 이에 대한 지식이 매우 제한되어 있으므로 어디에서나 내 답변을 찾을 수 없습니다. 내가 뭘 하려는지 정보를 토글하는 여러 단추를 만드는 것입니다. 따라서 첫 번째 토글을 클릭하면 div 1이 토글됩니다. 두 번째 토글 div를 클릭하면 두 개가 열리 며 div 1이 닫힙니다. 내 코드는 매우 기본 적이기 때문에 나는 이것에 대해 아주 새로운 것이다. 현재 토글 영역에 어떤 값을 입력했는지에 상관없이 두 div가 닫힙니다. 고마워요.

<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
    $("div.house").toggle(); 

    }); 
}); 
</script> 

<button>Toggle</button> 
<div class="house"> 
<p>SAMPLE TEXT ETC...</p> 
</div> 

<button>Toggle</button> 
<div class="tumble-by"> 
<p>SAMPLE TEXT ETC...</p> 
</div> 

Answer 1

당신은 다음 형제를 선택할 수 있습니다 : 위의 코드에서

$("button").click(function(){ 
    $(this).next().toggle(); 
}); 

, 자바 스크립트 this 키워드가 클릭 된 요소를 참조

여기 내 코드입니다. $(this)은 jQuery 컬렉션을 만들고 .next() 메소드는 컬렉션 요소의 바로 다음 형제를 선택합니다.

$("button").click(function() { 
    $('div').hide(); 
    $(this).next().toggle(); 
}); 

Answer 2

내가 먼저 모든 div를 숨길 필요도 동의 별도의 이름을 사용하십시오).

귀하의 HTML 코드는 언젠가는 극적으로 변경 될 수 있으며 식별자는 구조 나 태그 이름에 의존하지 않으므로 어쨌든 작동합니다.

Answer 3

<script> 
    $(document).ready(function() { 
     $(document).on("click", ".js-toggle__button", function (e) { 
      $(".js-toggle__text").hide(); 
      $(this).next(".js-toggle__text").show(); 
     }); 
    }); 
</script> 

<button class="toggle__button js-toggle__button">Toggle</button> 
<div class="toggle__text js-toggle__text"> 
    <p>SAMPLE TEXT 1 ETC...</p> 
</div> 

<button class="toggle__button js-toggle__button">Toggle</button> 
<div class="toggle__text js-toggle__text"> 
    <p>SAMPLE TEXT 2 ETC...</p> 
</div> 

그것은 당신이 JS (의 요소에 액세스 할 때 고유하게 정의 된 식별자를 사용하는 것이 좋습니다 및 CSS 위해 그들을 사용하지 않는 - :