点击某个按钮，打印它的索引号（面试题改写）

需求：一共四个按钮，想要点击某个按钮的时候，打印其索引号

（点击某个按钮，改变当前按钮的背景颜色-排他思想）

 

---

为了都能看到效果，我选择了不同的标签

<button>点击1</button>
<button>点击2</button>
<button>点击3</button>
<button>点击4</button>

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

错误做法

var btns = document.querySelectorAll('button');
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
         console.log("这是第" + i + "个按钮");
    }) 
}

输出结果如下

点击了四个按钮，输出的结果一样

---

解决方案1

通过闭包实现，闭包是一个函数，函数有其自身的作用域

var ul = document.querySelector("ul");
var lis = ul.querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
    (function(i) {
         lis[i].addEventListener("click", function() {
              console.log("这是第" + i + "个uli");
         })
     })(i)
}

解决方案2

利用es6语法let，let具有块级作用域

 var ol = document.querySelector("ol");
 var oLis = ol.querySelectorAll("li");
 for (let i = 0; i < oLis.length; i++) {
     oLis[i].addEventListener("click", function() {
         console.log("这是第" + i + "个oli");
     })
 }

输出结果如下

想要知道为什么，可以私信我呀！

推荐视频：https://www.bilibili.com/video/BV15741177Eh?p=33&t=7

该视频是一个vue教程，但是老师讲的es6语法是真的细，而且视频播放量非常高，需要的小伙伴自行观看！