简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
关于JavaScript中“this”中的问题
黄舟
黄舟 2017-04-11 12:57:37
0
4
507

  1. .为什么将以下代码中this，用sui[a]替换时，运行不出效果；

  2. .代码如下

<!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>

黄舟
黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

reply all(4)
巴扎黑
巴扎黑2017-04-11 12:59:37 4 floor

写个详细一点的- -

    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');
            }
Like +0
Add Reply
迷茫
迷茫2017-04-11 12:59:37 3 floor 

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什么。

Like +0
Add Reply
巴扎黑
巴扎黑2017-04-11 12:59:37 2 floor

典型的闭包问题，想深入理解的话自己多看书吧。

 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++)
Like +0
Add Reply
大家讲道理
大家讲道理2017-04-11 12:59:37 1 floor

可以利用自定义属性保存正确的a值，或者利用闭包来保存。

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！