jquery를 여러 번 사용하여 div 표시/숨기기

Question

jquery를 사용하여 텍스트 링크에서 DIV의 표시/숨기기를 수행하려고합니다.

내가 지금까지이 사이트에서 발견 한 예제와 약간 다른 점은 1 페이지에서 여러 번 수행하는 일반적인 방법이 필요하며 일부 페이지에서 사이트를 사용할 수도 있습니다.

페이지에 포함 된 별도의 파일에 JS를 넣을 수 있다면 정말 좋을 것입니다. 그렇다면 기능에 포함시킬 수 있을까요?

누군가 나를 도와 줄 수 있습니까? 일반화하기 위해 id = "toggle-hide-1"과 같은 ID로 표시/숨겨진 div를 지정하고 내 페이지의 숫자를 변경하여 다른 표시/숨기기 영역으로 만들 수 있습니다.

나는 div를 표시/숨기고 페이지에 표시/숨기기를 다른 div에서 구분할 수있는 이름을 사용하여 ID에 이름을 지정할 수 있습니다. 번호를 추가 할 수 있습니다.

아래는 링크 클릭에서 div의 표시/숨기기를 수행하는 부분 코드이지만 꼭 필요한 것은 아닙니다.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" > 
$(function() { 
    $(".view-code").click(function(evt) { 
     $(".tool_block, .view-code").toggle(); 
    }); 
}); 
</script> 
<a href="#" class="view-code" >view code</a> 
<a href="#" class="view-code" style="display:none">hide code</a> <br /> 

<div class="tool_block" style="display:none" > 
this stuff is hidden until we choose to show it! 
</div> 

Answer 1

아마도 가장 좋은 방법은 사용자 지정 특성을 사용하는 것입니다. jquery에 토글을 알리는 속성으로 앵커를 마크 업하면 작업을 수행하기 위해 일반 코드를 작성하는 것이 더 쉬울 것입니다. 이 같은

뭔가 :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" > 
$(function() { 
    $(".view-code").click(function(evt) { 
     var d = $(this).attr("toolDiv"); 
     $(".tool_block[toolDiv=" + d + "], .view-code[toolDiv=" + d + "]").toggle(); 
    }); 
}); 
</script> 
<a href="#" class="view-code" toolDiv="1" >view code</a> 
<a href="#" class="view-code" toolDiv="1" style="display:none">hide code</a> <br /> 

<div class="tool_block" toolDiv="1" style="display:none" > 
this stuff is hidden until we choose to show it! 
</div> 

그런 다음 앵커-DIV 쌍의 각각에 고유 한 toolDiv 값 (숫자 일 필요는 없습니다) 제공합니다.

Answer 2

div에 전체 컬렉션을 래핑 할 수 있다면 매우 쉽게 만들 수 있습니다. 는 <br />을 처리하지 않는 경우

$(function() { 
    $(".view-code").click(function(e) { 
     $(this).siblings().andSelf().toggle(); 
    }); 
}); 

<div> 
    <a href="#" class="view-code" >view code</a> 
    <a href="#" class="view-code" style="display:none">hide code</a> <br /> 

    <div class="tool_block" style="display:none" > 
    this stuff is hidden until we choose to show it! 
    </div> 
</div> 

, 당신은 단지 DIV 및 앵커 요소에 형제를 필터링 할 수 있습니다.

Answer 3

대신 특정 클래스를 사용하지 않는 이유는 무엇입니까? 당신은 표시 할 각 요소/년으로 "toggler"라는 클래스를 가질 수 숨겨진 :와,

<div class="toggler"> 
... 
</div> 

그런 다음 번에이 클래스와 모든 요소의 가시성을 전환 할 수 있습니다 :

$(".toggler").toggle(); 

이 시나리오에서는 문서에서 이러한 요소가 상주하거나 요소의 종류가 달라지지 않습니다. 이 기능은 전 세계적으로 사용할 수 있어야하는 경우

, 당신은 항상 같이 사용자 정의 기능을 jQuery를 자체를 확장 할 수

$.toggleTogglers = function(toggleClass) { 
    $("." + toggleClass).toggle(); 
}; 

이 점에서 좋은 당신의 토글 사용자 정의 클래스를 선택할 수있는 유연성을 당신의 자신의 디자인.