Question

myDiv = document.getElementById('results');

div = myDiv.getElementsByTagName('div');


for (var i = 0; i < div.length; i++) {
    var division;
    division = div[i];

    // console.log(div[i]);

    division.addEventListener('mouseover', function () {
        division.style.fontWeight = "bold";
        division.style.background = "rgba(0, 7, 255, 0.29)";
    }, false);

    division.addEventListener('mouseout', function () {
        division.style.fontWeight = "";
        division.style.background = "";

    }, false);

这是html代码：

<div id="results">
    <div>Resulat 1</div>
    <div>Resulat 2</div>

</div>

我的脚本大胆并且在某些文本上放置背景是当鼠标指针在它上面时仅用于第二个元素..（Resulat 2）有人可以告诉我为什么，因为我所做的一切都适合我，即使我是JS的初学者。

Answer 1

division中的function()是什么？它与您在division的每次迭代中更改的division = div[i];相同。 for-loop结束后division为div[1]。这就是你只改变第二个div的原因。

您可以使用闭包来解决此问题，或使用this访问关联的对象：

division.addEventListener('mouseover', function () {
    this.style.fontWeight = "bold";
    this.style.background = "rgba(0, 7, 255, 0.29)";
}, false);

division.addEventListener('mouseout', function () {
    this.style.fontWeight = "";
    this.style.background = "";
}, false);

但是，使用CSS可以轻松实现所需的效果：

#results > div:hover{
    font-weight:bold;
    background-color:rgba(0,7,255,0.29);
}

Answer 2

使用this：

division.addEventListener('mouseover', function() {
    this.style.fontWeight = "bold";
    this.style.background = "rgba(0, 7, 255, 0.29)";
}, false);

division.addEventListener('mouseout', function() {
    this.style.fontWeight = "";
    this.style.background = "";    
}, false);

由于循环，

division将保留最后一个div Live DEMO

如果有必要，另一种方法是为每次迭代创建一个私有范围闭包。

for (var i = 0; i < div.length; i++) {
    (function() {
        var division = div[i];;

        division.addEventListener('mouseover', function() {
            division.style.fontWeight = "bold";
            division.style.background = "rgba(0, 7, 255, 0.29)";
        }, false);

        division.addEventListener('mouseout', function() {
            division.style.fontWeight = "";
            division.style.background = "";

        }, false);
    })();
}

Live DEMO

Answer 3

您正在引用“division”设置为w /事件侦听器的最后一个元素。要按照自己的意愿行事，请在其中使用“this”：

myDiv = document.getElementById('results');

div = myDiv.getElementsByTagName('div');

for (var i = 0; i < div.length; i++) {
    var division = div[i];

    division.addEventListener('mouseover', function (e) {
        this.style.fontWeight = "bold";
        this.style.background = "rgba(0, 7, 255, 0.29)";
    }, false);

    division.addEventListener('mouseout', function (e) {
        this.style.fontWeight = "normal";
        this.style.background = "inherit";
    }, false);
}

for循环中的addEventListener

3 个答案: