解決した

forループ内のリスナーのバインド:可変スコープの誤解

フロントエンド

私は可変スコープの問題を抱えていましたが、なぜこれが起こり、どのようにそれを取り除くのか理解できません。

    var items = ['foo', 'bar'];
    for (var index in items) {
        var item = items[index];
        var selector = '.'+item+'-class';
        $(selector).bind('click', function() {
            console.log("class: "+$(this).attr('class'));
            console.log("selector: "+selector);
            console.log("item: "+item);
        });
    }

このコードが次のHTMLに対して実行されると考えます:

<div class="foo-class">Foo</div>
<div class="bar-class">Bar</div>

"Foo"をクリックすると、最初の行で正しいクラス(つまり "foo-class")がエコーされますが、セレクタと後続の項目名はbarに関連しています。 私は問題は、ループの2番目の反復が最初のもので使用された変数をリセットすることだと思います。

私は、ループ内の宣言がこのレベルでそのスコープを明確に宣言するべきだと考えました。 私が間違っている ? どうして ? どうすれば修正できますか?

私は回避策を模索するつもりはない、私は何かクリーンなjavascriptの可変範囲のmecanismのより良い理解したい。

ここにjsfiddle

ありがとう!


Progress 100%

一番いい

回答

フロントエンド

ここであなたのフィドルの例が更新されました。

var items = ['foo', 'bar'];
for (var index in items) {
    (function() {
        var item = items[index]; 
        var selector = '.' + item + '-class';
        $(selector).bind('click', function() {
            console.log("class: " + $(this).attr('class'));
            console.log("selector: " + selector);
            console.log("item: " + item);
        });
    })();
}​

無名関数を作成すると、定義された変数ごとに新しいスコープが定義されます

ヒント:コードをきれいに保つために、バインドを実行する別の関数を作成してみてください。