jQuery는 다음 두 요소를 전환합니다

Question

특정 값이 선택 될 때 페이지의 다른 요소 (DT / DD 쌍)를 전환하는 양식 선택 요소가 있습니다.

이벤트는 올바르게 트리거되지만 요소를 전환 할 수는 없습니다. 참고 페이지의 "세트"의 수는 가변적이기 때문에 클래스 선택기를 사용하고 있습니다. 내 코드는 다음과 같습니다.

$(".lender_id").change(function () {
if($(this).val()=='45')
   {
   $(this).next(".lender_other1").toggle();
   $(this).next(".lender_other2").toggle();
   }
});

lender_id는 내 선택 요소 클래스, HTML 코드입니다 (이 요소 세트가 페이지에 여러 번 나타날 수 있음) :

<dt>Lender</dt>
<dd><select name="lender_id[1]" class="lender_id">
<option value="1">Value</option>
<option value="45">Special Value</option>
</select></dd>

<dt class="lender_other1" style="display:none;">Lender Name</dt>
<dd class="lender_other2" style="display:none;">
<input type="text" name="lender_other[1]" value="" /></dd>

<dt>Lender</dt>
<dd><select name="lender_id[2]" class="lender_id">
<option value="1">Value</option>
<option value="45">Special Value</option>
</select></dd>

<dt class="lender_other1" style="display:none;">Lender Name</dt>
<dd class="lender_other2" style="display:none;">
<input type="text" name="lender_other[2]" value="" /></dd>

etc...

Answer 1

여기에 원하는 것이 있습니다.

$(".lender_id").change(function() {
    if ($(this).val() == '45') {
        $(this).parent().nextAll(".lender_other1:first, .lender_other2:first").toggle();
    };
});

편집하다

클래스 선택기를 결합하여 더 효율적으로 만들었습니다.

Answer 2

next() 당신이 생각하는 것을하지 않습니다. 노력하다 $(this).parent('dl').find('.lender_other1'). 아니면 알았을 것입니다 $('.lender_other1').

Answer 3

.next ()는 다음 경기 만 반환하므로 .nextall ()을 사용해야한다고 생각합니다.

http://docs.jquery.com/traversing/nextall#expr

Answer 4

사용 슬라이스 (시작, 끝) 방법 . John Resig의 비디오에 따르면 이것은 올바른 방법입니다.