ClosureTest

by uedatakuya

HTML

Can you explain difference of 'Bad' and 'Good'?

<h2>Bad</h2>
<div>
    <button class="bad">Bad1</button>
    <button class="bad">Bad2</button>
    <button class="bad">Bad3</button>
</div>

<h2>Good</h2>
<div>
    <button class="good">Good1</button>
    <button class="good">Good2</button>
    <button class="good">Good3</button>
</div>

JavaScript

var bads, goods, i, j;

// Bad
bads = $('.bad');
for (i = 0; i < bads.length; i++) {
    $(bads[i]).click(function(){
        alert(i);
    });
}

// Good
goods = $('.good');
for (j = 0; j < goods.length; j++) {
    $(goods[j]).click(function(j){
        return function() {
            alert(j);
        };
    }(j));
}