입력에서 다음 div 토글

Question

입력 후 첫 번째 div를 토글하고 싶습니다.

가능합니까?

$(this).parent().next().show(); 

Answer 1

귀하의 코드가 $(this)을하기 때문에 작동하지 않는, 아니 다음 부모 사업부 사업부에서 다음 요소를 참조하는) (다음

를 사용하여 부모(). 다음(). 쇼() 귀하의 버튼을 참조하지 않았습니다. 또한 .next()은 존재하지 않는 버튼 다음의 요소를 찾았습니다. 해당 버튼의 부모 뒤에있는 요소를 찾고 있습니다.

또한, 대신 onclick을 사용하여 이벤트를 바인딩의 바로 자바 스크립트와 완전히 바인딩 :

<div> 
    <input value="Show/Hide" type="button" /> 
</div> 

<div style="display:none;"> 
    Text 
</div>​ 

데모 : http://jsfiddle.net/NXM7w/

Answer 2

이에게 주사를 내가 클래스 나 ID를 사용할 수 없습니다

<script type="text/javascript"> 
function spoiler() { 
    $(this).next().show(); 
} 
</script> 

<div> 
     <input value="Show/Hide" style="" onclick="spoiler();" type="button"/> 
</div> 
<div style="display:none;"> 
    Text 
</div> 

을 tryed

당신은 이미 <div /> 안에있는 것처럼 나무를 한 장소 위로 이동해야합니다.

Answer 3

당신은 사용해야합니다 :

$(this).parent().next().show();

필자는

Answer 4

DOM의 정확한 위치를 알고있는 경우 $('div:nth-child(2)')과 같은 방법으로 요소를 선택할 수 있지만 매우 취약합니다. 마크 업을 변경하면 스크립트가 손상 될 수 있습니다.

Answer 5

때문에

Answer 6

$(document).ready(function() { 
    $('input[value="Show/Hide"]').click(function() { 
     $(this).parent().next('div').toggle(); 
    }); 
});​ 

그런 다음 HTML을 단순화 할 수 있습니다

현재 전역 변수 'this'를 현재 참조하고 있습니다. 당신 DIV 패스 자체를 가지고 당신은 매우 쉽게 거기에서 작업 할 수 있습니다

<div> 
     <input value="Show/Hide" style="" onclick="spoiler(this)" type="button"/> 
</div> 
<div style="display:none;"> 
    Text 
</div> 

이 그런 다음 JS 기능은 다음과 같이 할 수 있습니다 : 당신을 위해 그것을하지

function spoiler(div1) { 
    $(div1).parent().next().toggle(); 
} 

희망을.