js闭包for循环总是只执行最后一个值得解决方法

Posted 2020-08-26

<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());
});