当我们要循环绑定一个事件的时候，我们都会出现问题，就是i的索引值是不对的，如果大家有疑惑可以进行看我下面的代码和执行结果。

文章目录

• • 解决方法！！
  • • 一： 使用IIFE立即执行函数通过传值 解决
    • 二： 使用 let 有块级作用域 解决
    • 三： 使用 事件对象 中的 target 属性 解决
    • 四： 给 li 存储一个值 解决

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

JS

 var lis = document.querySelectorAll('ul li');
 for (var i = 0; i < lis.length; i++) {
     lis[i].onclick = function () {
         console.log(i);
     }
 }

当我们点击每一个 li 的时候可以看一点输出的是 ↓

很出乎意料这不是我们想要的值，为什么会等于5呢？

好 接下来 给大家来个问题：点击一个li就把当前li的背景色变为 “红色”

HTML

 <ul>
   <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

JS

var lis = document.querySelectorAll('ul li');
for (var i = 0; i < lis.length; i++) {
     lis[i].onclick = function () {
         lis[i].style.background = 'red';
     }
 }

可以看到这里报错了，很明确并没有获取到 li 这个元素，哪怎么来进行换背景颜色呢？？

好接下来可以跟上面相照应了，为什么会报错呢？是获取元素出错了吗?我们来看看

很明确并没有，哪是到底是怎么个回事呢？

现在应该可以确定了就是 i 这个变量出了问题！！！
lis这个变量 是一个数组 里面存储着5个li 他们对应的索引号分别是：0,1,2,3,4
是吧？
而且 i 输出的是 5 很明显 我们是获取不到 li元素的。

解决方法！！

关于解决方法 有 4 个；

一： 使用IIFE立即执行函数通过传值 解决

var lis = document.querySelectorAll('ul li');
console.log(lis);
 for (var i = 0; i < lis.length; i++) {
     (function (i) {
         lis[i].onclick = function () {
             lis[i].style.background = 'red';
         }
     })(i)
 }

二： 使用 let 有块级作用域 解决

var lis = document.querySelectorAll('ul li');
console.log(lis);
for (let i = 0; i < lis.length; i++) {
    lis[i].onclick = function () {
        lis[i].style.background = 'red';
    }
}

三： 使用 事件对象 中的 target 属性 解决

var lis = document.querySelectorAll('ul li');
for (let i = 0; i < lis.length; i++) {
    lis[i].onclick = function (e) {
        e.target.style.background = 'red';
    }
}

四： 给 li 存储一个值 解决

var lis = document.querySelectorAll('ul li');
for (let i = 0; i < lis.length; i++) {
    lis[i].index = i;
    lis[i].onclick = function () {
        lis[lis[i].index].style.background = 'red';
    }
}

呜呜呜呜呜~~~~~~~~~~~~ 点赞 + 评论 谢谢大家~~~~~