JavaScript でループ処理の中でのイベント割り当てにクロージャを使う

クロージャを使わない場合のデモ

• Action0
• Action1
• Action2

message

クロージャを使った場合のデモ

• Action0
• Action1
• Action2

message

JavaScript コード

/* クロージャを使わない場合 */
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>