2

私はjQueryを初めて使用し、以下のコードで何が起こっているのかを理解しようとしています。

var data = {1, 2, 3, 4};
for (var key in data) {
    $("#id"+key).click(function() {
        $(".class"+key).hide();
    });
}

このコードを実行すると、どのIDをクリックしても、class4が非表示になります。なぜこの振る舞いが当てはまるのですか？

また、id1でclass1を非表示にし、id2でclass2を非表示にする方法などを教えてください。

ありがとう

4

2 に答える 2

1

作業デモ

var data = [1, 2, 3, 4];
for (var i = 0;i < data.length; i++) {    
    (function(key) {    
        $("#id"+key).click(function() {
            $(".class"+key).hide();
        });
    })(data[i])
}​

keyfor eachループのクロージャは、ハンドラーのクリックによって作成されますが、グローバルスコープ内にあるものを指します。そしてそれは変わります。私のコードでは、キーは追加の関数ラッピングによって作成され.clickたスコープkeyを指し、keyその中で、それが新しいたびに、その関数によって作成されたスコープを指します

var data = {1, 2, 3, 4};-これは有効なオブジェクト定義ではありません。var data = {key:"value", key2:"value",...};上記の例は、正しく指定されたオブジェクトでも機能します。 key次のような変数 もテストする必要があることを忘れないでください：などif(data.hasOwnProperty(key)) {...}を除外するために.toString（.valueOfデフォルトのオブジェクトメソッド）

keyまたは、回避策のように、クリックした要素IDからい​​つでもクラス名を作成できます。

$("#id"+key).click(function() {
    var className = ".class" + $(this).prop("id").replace("id", "");
    $(className).hide();
});

そして、閉鎖は必要ありません。

于 2012-11-09T06:31:26.447 に答える
0

これを試して

var data = { 1: 1, 2: 2, 3: 3, 4: 4 };
for (var key in data) {
   $("#id" + key).click(function () {
           $(".class" + this.id.substr(this.id.toString().length - 1, 1)).hide();
     });
}

実際に問題は

  1. var data = {1, 2, 3, 4};確かに無効です。
  2. $(".class"+key)実行時にclickイベントで評価され、その時点で、最後に割り当てられた値がkey保持4されるため、間違っています。idしたがって、実行時にクリッカー自体からその数値を取得する必要があります。
于 2012-11-09T06:31:08.603 に答える