需求:一共四个按钮,想要点击某个按钮的时候,打印其索引号
(点击某个按钮,改变当前按钮的背景颜色-排他思想)
为了都能看到效果,我选择了不同的标签
<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语法是真的细,而且视频播放量非常高,需要的小伙伴自行观看!