js閉包for迴圈總是只執行最後一個值得解決方案

標籤：jquery   idt   onclick   dex   height   int   ddd   for   索引   

<style>
li{
list-style: none;width:40px;height: 40px;text-align:center;line-height: 40px;cursor: pointer;
}
</style>

html代碼：
<ul id="uls">
    <li style="background:#aaa">0</li>
    <li style="background:#bbb">1</li>
    <li style="background:#ccc">2</li>
    <li style="background:#ddd">3</li>
</ul>

//這樣寫的話每次彈出都是最後一個值
// var lis=document.getElementsByTagName(‘li‘);
// for (var i = 0; i <=lis.length; i++) {
// lis[i].onclick = function(){
// alert(i);
// }
// };

使用閉包方法解決

//解決方案一：
var lis=document.getElementsByTagName(‘li‘);
for (var i = 0; i <=lis.length; i++) {
    (function(i){
        lis[i].onclick = function(){
            alert(i);
        }
    })(i);
};

//解決方案二：
var lis=document.getElementsByTagName(‘li‘);
for (var i = 0; i <=lis.length; i++) {
    lis[i].onclick = function(n){
        return function(){
            alert(n);
        }
    }(i);
};

//解決方案三(jquery)：
$("ul li").click(function(){
    var index = $(this).index(); //擷取索引下標 也從0開始
    alert($(this).html());
});

js閉包for迴圈總是只執行最後一個值得解決方案