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

我的脚本在某些文本上加粗并带有背景是当鼠标指针悬停在它上方时，它仅适用于第二个元素.. ( <div>Resulat 2</div>)

有人可以告诉我为什么，因为我所做的一切都适合我，即使我是 JS 初学者。

4

3 回答 3

1

你的里面有division什么function()？division它与您在每次迭代中更改的相同division = div[i];。在你的 for 循环完成之后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);
}
于 2012-11-12T12:54:48.453 回答
1

使用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。
现场演示

如有必要，另一种方法是为每次迭代创建一个私有作用域闭包。

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);
    })();
}​

现场演示

于 2012-11-12T12:54:57.670 回答
0

您正在引用最后一个将“除法”设置为带有事件侦听器的元素。做你想做的事，在它的地方使用“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);
}
于 2012-11-12T13:07:16.993 回答