js:for循环里绑定onclick事件:报错Uncaught TypeError: Cannot set properties of undefined (setting ‘className‘)
我想要实现如下效果:点击上面的栏目,切换下面栏目的内容编写代码如下(主要看js部分)<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="v
·
我想要实现如下效果:点击上面的栏目,切换下面栏目的内容
编写代码如下(主要看js部分)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tab{
display: inline-block;
width: 100px;
height: 50px;
background-color: #aaa;
}
.current{
background-color: yellow;
}
.content{
display: none;
}
</style>
</head>
<body>
<div class = "tab">
<div class = "tab_list">
<li>栏目1</li>
<li>栏目2</li>
<li>栏目3</li>
</div>
<div class = "tab_con" style="display: block;">栏目1的内容</div>
<div class = "tab_con">栏目2的内容</div>
<div class = "tab_con">栏目3的内容</div>
</div>
<script>
var tab_list = document.querySelector(".tab_list").querySelectorAll("li");
var tab_con = document.querySelectorAll(".tab_con");
for(var i = 0;i<tab_list.length;i++){
tab_list[i].onclick = function(){
// 上面的栏目切换
for(var j = 0;j<tab_list.length;j++){
tab_list[j].className = "tab";
}
tab_list[i].className = "tab red";
// 下面文字的效果
for(var j = 0;j<tab_con.length;j++){
tab_con[j].style.display = "none";
}
tab_con[i].style.display = "block";
}
}
</script>
</body>
</html>
结果发现报错:Uncaught TypeError: Cannot set properties of undefined (setting 'className') at HTMLDivElement.tab.<computed>.onclick
百度了一番,再自己测试,发现下面的代码:
<script>
var tab_list = document.querySelector(".tab_list").querySelectorAll("li");
var tab_con = document.querySelectorAll(".tab_con");
for(var i = 0;i<tab_list.length;i++){
tab_list[i].onclick = function(){
console.log("栏目" + i + "被点击了");
}
}
</script>
打印中,i为3,而不是以为中的0、1、2。
查阅资料后知道:
在for循环中,为每个tab_list绑定onclick事件监听,但是在函数执行时,i已经循环结束,所以打印输出的是3。
即,我们在for循环中的事件监听函数,需要避免使用到循环变量i
那么,如果涉及到tab_list[i],我们可以使用this;如果涉及到tab_con[i],也就是利用到i得到别的元素,那么我们可以给tab_list增加一个属性index,然后在onclick函数中,得到这个属性,即得到我们想要的i
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.tab{
width: 400px;
margin: 100px auto;
}
.tab .tab_list li{
display: inline-block;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #aaa;
}
.tab .tab_list .current{
background-color: yellow;
}
.content{
display: none;
}
</style>
</head>
<body>
<div class = "tab">
<div class = "tab_list">
<li>栏目1</li>
<li>栏目2</li>
<li>栏目3</li>
</div>
<div class = "tab_con" style="display: block;">栏目1的内容</div>
<div class = "tab_con">栏目2的内容</div>
<div class = "tab_con">栏目3的内容</div>
</div>
<script>
var tab_list = document.querySelector(".tab_list").querySelectorAll("li");
var tab_con = document.querySelectorAll(".tab_con");
for(var i = 0;i<tab_list.length;i++){
tab_list[i].setAttribute("index",i);
tab_list[i].onclick = function(){
var index = this.getAttribute("index");
console.log("栏目" + index + "被点击了");
// 上面的栏目切换
for(var j = 0;j<tab_list.length;j++){
tab_list[j].className = "";
}
tab_list[index].className = "current";
console.log(this.className);
// 下面文字的效果
for(var j = 0;j<tab_con.length;j++){
tab_con[j].style.display = "none";
}
tab_con[index].style.display = "block";
}
}
</script>
</body>
</html>
更多推荐
已为社区贡献2条内容
所有评论(0)