jQueryは次の2つの要素を切り替えます
質問
フォーム選択要素があり、特定の値が選択されると、ページ上の他の2つの要素(dt / ddのペア)を切り替えます。
イベントは正しくトリガーされますが、要素を切り替えることができません-これらの要素の数が「設定」されるため、クラスセレクターを使用していることに注意してください。ページ上の変数は可変です。ここに私のコードがあります:
$(".lender_id").change(function () {
if($(this).val()=='45')
{
$(this).next(".lender_other1").toggle();
$(this).next(".lender_other2").toggle();
}
});
lender_idは私のselect要素クラスであり、次のような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...
解決
必要なものは次のとおりです。
$(".lender_id").change(function() {
if ($(this).val() == '45') {
$(this).parent().nextAll(".lender_other1:first, .lender_other2:first").toggle();
};
});
編集
クラスセレクターを組み合わせて、より効率的にしました。
他のヒント
next()
はあなたが思っていることをしませんします。 $(this).parent( 'dl')。find( '。lender_other1')
を試してください。または、おそらく $( '。lender_other1')
かもしれません。
.next()は次の一致のみを返すため、.nextAll()を使用する必要があると思います
slice(start、end)メソッドを使用します。 john resigのビデオによると、これは正しい方法です。
所属していません StackOverflow