1

HTML 要素に追加データを追加するための適切なパターンは何ですか? たとえば、チェックボックスがチェックされていないときに非表示にしたいHTMLにチェックボックスをリンクしたいと思います。for要素の属性と同様にlabel、リンクをマークアップで指定して、すべてのチェックボックスを反復処理し、jquery イベント ハンドラーをフックして非表示/表示を行う単純で汎用的なスクリプトを記述できるようにします。

たとえば、次の HTML では:

<input type="checkbox" id="showFoo" />
<div id="foo">
    Some HTML here. Hide this when the checkbox is unchecked.
</div>

#showFooに関連していることをスクリプトに知らせるにはどうすればよい#fooですか? 理想的には、HTML を非検証にしない、または ID に特定の命名規則を使用する必要がないものです。私のスクリプトがより効率的になる場合は、追加のクレジット。

4

5 に答える 5

2

data-[key]属性を使用して、何#showFooを制御する必要があるかを識別します

例jsfiddle

HTML:

<input type="checkbox" id="showFoo" data-toggles="foo" />
<div id="foo">
    Some HTML here. Hide this when the checkbox is unchecked.
</div>

jQuery:

$('#showFoo').change(function() {
    $('#' + $(this).data('toggles')).toggle();
});
于 2012-01-24T17:48:48.527 に答える
1

これは、データ要素の完璧なケースのようです。

<input type="checkbox" id="showFoo" data-relateddiv="foo" />

次に、チェックボックスのイベント ハンドラーで次のようにします。

$('#' + $(this).data("relateddiv")).show();
于 2012-01-24T17:46:05.033 に答える
0

現在これを使用しています

element.each(function(i, e) {  
            var checked = $(e).prop('checked'),
                foo = */Relationship betweeen element and foo*/;
            foo .toggleClass('invisibleClass', checked)
                .toggleClass('visibleClass', !checked);
        });

複数の foo と要素がある場合 (最初にそれらの間の関係を定義する必要があります)

選択したイベントで実行する

于 2012-01-24T17:57:21.010 に答える
0

「rel」属性を使用できます

<input type="checkbox" id="showFoo" rel="foo" />

$('#showFoo').click(function(){
  var element_id = $(this).attr('rel');
  var element = $('#'+element_id);
  if(element.is(':hidden')){
    element.slideDown();
    //element.show();
  }
  else{
    element.slideUp();
    //element.hide();
  }
});
于 2012-01-24T17:49:27.587 に答える
-1

以下を試してください

if (checkboxIsChecked) {
foo.visibility:visible;
} else {
foo.visibility:hidden;
}
于 2012-01-24T17:47:30.773 に答える