.为什么将以下代码中this,用sui[a]替换时,运行不出效果;
.代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.car{
background: #1dacbe;
}
</style>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
</html>
<script>
var sui=document.getElementsByTagName("button");
for(var a=0;a<sui.length;a++){
sui[a].onclick=function () {
for(var b=0;b<sui.length;b++){
sui[b].className=""
}
this.className="car"
}
}
</script>
巴扎黑2017-04-11 12:59:37
写个详细一点的- -
for (var a = 0; a < sui.length; a++) {
sui[a].index = a; //将当前循环的a值保存为当前按钮的index
sui[a].onclick = function() {
for (var b = 0; b < sui.length; b++) {
sui[b].className = '';
}
cosole.log(a);
sui[this.index].className = 'car';
};
}
console.log(a);你就会发现,a返回的都是最后循环结束的值,你这里就是5,然后你只有5个按钮,就是01234...所以代码无效。
sui[a].index = a可将每个循环的a的值存储到index,然后使用this.index调用,所以应该是sui[this.index]
或者你把最外层的for的var改为let也行,这个写tab选项卡、轮播的控件的时候你都会用得到。
最后你的问题,this是什么?
if (sui[this.index] === this) {
console.log('true');
}
迷茫2017-04-11 12:59:37
var sui=document.getElementsByTagName("button");
for(var a=0;a<sui.length;a++){
sui[a].onclick=(function (idx) {
for(var b=0;b<sui.length;b++){
sui[b].className=""
}
sui[idx].className="car"
})(a);
}
但我不会告诉你为w什么。
巴扎黑2017-04-11 12:59:37
典型的闭包问题,想深入理解的话自己多看书吧。
sui[a].onclick=function () {
for(var b=0;b<sui.length;b++){
sui[b].className=""
}
console.log(a) //打印下a的值你就知道了
sui[a].className="car" //这句话会报错的
}
最简单的解决方法是把for循环中的var换成let
for(let a=0;a<sui.length;a++)