0

次の HTML があるとします。

<fieldset>
    <legend>
        <input type="checkbox" name="amazon_activated" /> 
    </legend>
    <table>
        <tr>
            <td>
                Amazon Data
            </td>
        </tr>
    </table>
</fieldset>

次のコードは、チェックボックスに関連するデータ コンテナ テーブルの表示/非表示を許可します。

$("input[name='amazon_activated']").click(function(){
    $(this).parent("legend").next("table").toggle( $(this).is(":checked") );
});

次のコードはhide/show、ページの読み込み後に状態を開始する必要があります。

if ( ! $("input[name='amazon_activated']").is(":checked")){
    $(this).parent("legend").next("table").hide();
}

まあ、それは失敗しています。

理由はすでにわかっています。要素ではなく、要素thisを参照しています。pagecheckbox

だから私は疑問に思います：

すぐに次のいずれかを選択するのが最善のポリシーですかid/class。

$("#id")

フォームベースのセレクターを介して、jquery を介して制御を容易にするために、重要な要素については?:

$("input[name='amazon_activated']")
4

5 に答える 5

1

要素をキャッシュします。 

var element = this;

this適切なコンテキストにある場合。

通常、特定のマークアップに対して Javascript をコーディングしますが、その逆ではありません。ID とクラスには、セレクターとして使用される以外の意味があります。

于 2012-05-29T17:57:46.210 に答える
1

外部関数の上部に要素をキャッシュできると思います。他の場所で使用すると便利です。また、キャッシング要素もパフォーマンスを向上させます。次のようなことができます。

var input = $("input[type='checkbox']"),
    table = $("fieldset table");
于 2012-05-29T17:58:04.413 に答える
1 
if ( ! $("input[name='amazon_activated']").is(":checked")){
    $(this).parent("legend").next("table").hide();
}

上記のコード内でthisは、ページ要素のスコープに属しています。

$("input[name='amazon_activated']").click(function(){
    $(this).parent("legend").next("table").toggle( $(this).is(":checked") );
});

上記のコードでは、を指す のコールバック スコープにthis属します。input[name='amazon_activated']input[name='amazon_activated']

したがって、アクティブな最初のコードを作成するには、試してください

if ( ! $("input[name='amazon_activated']").is(":checked")){
    $("input[name='amazon_activated']").parent("legend").next("table").hide();
}

入力の参照を変数に保持し、それを使用することをお勧めします

var checkboxElement = $("input[name='amazon_activated']"); // you can also use id

それからあなたはこのように

if ( ! checkboxElement.is(":checked")){
    checkboxElement.parent("legend").next("table").hide();
}

checkboxElement.click(function(){
    $(this).parent("legend").next("table").toggle( $(this).is(":checked") );
});
于 2012-05-29T17:59:30.793 に答える
1

すべての回答がオブジェクトをキャッシュするように指示している理由は、それが非常に高速になるためだと思います。残りを無視して、特定の質問に答えるには、つまり：

フォームベースのセレクターよりもjqueryを介して制御を容易にするために、重要な要素のid /クラスをすぐに選択するのが最善のポリシーですか?

まず、「フォームベースのセレクター」ではなく「属性セレクター」と言います。jQuery が検索方法$('input[name="amazon_activated"]')などを区別しているとは思えないからです。$('a[href="#"]')

つまり、一般的な経験則は次のとおりです。

id セレクターは、クラス セレクターよりも高速であり、属性セレクターよりも高速です。

したがって、jQuery の速度だけを気にする場合は、それが重要です。ただし、id とクラスを追加すると、jQuery を介してターゲティングするためだけに、ページの読み込み時間が、対応するセレクターのパフォーマンスの向上よりも遅くなる可能性があります。

この長すぎる回答の要約:

  • 可能であれば jQuery セレクターの結果をキャッシュする
  • 可能であれば ID とクラスを使用しますが、
  • テストで必要であることが証明されない限り、不要な ID とクラスを追加しないでください。
于 2012-05-29T18:41:18.187 に答える
0

回答ありがとうございます。すべてが非常に役に立ちました（すべてに+1を付けます）。

あなたのヒントを考慮した最終的な解決策を追加したいと思います。

checkbox実際、関連する要素がいくつかあるため、それらをキャッシュし、連想配列を使用して反復処理を行いました ( add more id/class を回避します)。

var checkboxElements = {
    "amazon_activated" : $("input[name='amazon_activated']"),
    "clickbank_activated" : $("input[name='clickbank_activated']"),
    "ebay_activated" : $("input[name='ebay_activated']")
}

$.each(checkboxElements, function(i, el){
    $(el).parent("legend").next("table").toggle( $(el).is(":checked") );
    $(el).click(function(){
        $(el).parent("legend").next("table").toggle( $(el).is(":checked") );
    });
});
于 2012-05-29T21:51:03.780 に答える