Serendip

Web Studio

このクロージャの使い方を忘れてしまうのでメモしておく。

ループ処理の中でイベントを割り当てる場合に、ループカウンタが回り切ったものが適用されてしまう問題の解決方法。

デモ

JavaScript コード

/* クロージャを使わない場合（カウンタが回り切った値 3 が表示される） */
for (var i = 0; i < 3; i++) {
    $('#action1-'+i).click(function() {
        $('#msg1').text('Action' + i);
    });
}
/* クロージャを使った場合 */
for (var i = 0; i < 3; i++) {
    var func = (function (index) {
        return function() {
            $('#msg2').text('Action' + index);
        };
    })(i);
    $('#action2-'+i).click(func);
}

HTML コード

<ul id="action-list1">
    <li><a href="#" id="action1-0">Action0</a></li>
    <li><a href="#" id="action1-1">Action1</a></li>
    <li><a href="#" id="action1-2">Action2</a></li>
</ul>

<pre id="msg1">message</pre>

<ul id="action-list2">
    <li><a href="#" id="action2-0">Action0</a></li>
    <li><a href="#" id="action2-1">Action1</a></li>
    <li><a href="#" id="action2-2">Action2</a></li>
</ul>

<pre id="msg2">message</pre>

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

posted with amazlet at 10.04.15

Douglas Crockford
オライリージャパン
売り上げランキング: 1783

Amazon.co.jp で詳細を見る