0

ラジオの値に基づいて div を表示または非表示にする yes/no ラジオ ボタンのセットが複数あります。変更されたラジオ ボタンのセットに最も近い div のみを選択するにはどうすればよいですか?

http://jsfiddle.net/infatti/esLMh/

これは機能しますが、最も近いものだけでなく、ページ上のすべての div を変更します。

$('.hide-show input').change(function() {
  $('.hide-show-yes').toggle(this.value == 'yes');
  $('.hide-show-no').toggle(this.value == 'no');
});
$('.hide-show input:checked').change(); //trigger correct state onload

ページに複数のセットがある場合、ラジオ セットに最も近い div のみに影響を与えるにはどうすればよいですか?

$('.hide-show input').change(function() {
  $(this).next('.hide-show-yes').toggle(this.value == 'yes').next('hide-show-no').toggle(this.value == 'no');
});
$('.hide-show input:checked').change(); //trigger correct state onload
4

3 に答える 3

2

ラジオ ボタンの親 div の次の要素にアクセスする必要があります. この方法で実行できます.

ライブデモ

$('.hide-show input').change(function() {
  $(this).closest('div').next('.hide-show-yes').toggle(this.value == 'yes');
  $(this).closest('div').next('.hide-show-no').toggle(this.value == 'no');
});
$('.hide-show input:checked').change(); //trigger correct state onload
于 2013-04-19T17:55:26.357 に答える
0

入力フィールドにIDを指定すると、IDを制御できるため、次のようなことができます

$('#radioButtonOne').change(function() {

と

$('#radioButtonTwo').change(function() {

そうすれば、何が変更されているかを常に確認でき、変更に応じてさまざまな機能を実行できます。

また、複数の div を非表示にして表示するのではなく、div のテキストを変更するため、状態ごとに 1 つの div のみを使用することをお勧めします。

また、on jquery 関数を使用することをお勧めします。これにより、DOM を変更しながら、作成する可能性のある新しい要素を引き続きリッスンできます。

 $("#radioButtonOne").on("change", function(event){
于 2013-04-19T17:51:54.393 に答える
0 
$('.hide-show input').change(function() {    
  $(this).parent().next().toggle(this.value == 'yes');
  $(this).parent().next().next().toggle(this.value == 'no');
});
$('.hide-show input:checked').change(); //trigger correct state onload

JSFIDDLE

于 2013-04-19T18:02:57.113 に答える