Question

我的网站上有6个<p>标记，希望X在悬停时有不同的颜色：

HTML：

<p>A<span class="del">X</span></p>
<p>B<span class="del">X</span></p>
<p>C<span class="del">X</span></p>
<p>D<span class="del">X</span></p>
<p>E<span class="del">X</span></p>
<p>F<span class="del">X</span></p>

JS：

function func(elem) {
    'use strict';
    elem.style.backgroundColor = "red";
}

var spans = document.getElementsByClassName("del");
var i;
for (i = 0; i < spans.length; i = i + 1) {
    spans[i].onmouseover = func(spans[i]);
}

但是使用我的代码，每个X都有一个红色背景，即使我没有悬停在任何东西上。我需要改变什么？

Answer 1

使用.addEventListener()我还将你的for循环放入一个名为events()的函数中。页面准备就绪时将调用此方法。

function func() {
   this.style.backgroundColor = "red";
}
function events(){
var spans = document.getElementsByClassName("del");
var i;
for (i = 0; i < spans.length; i = i + 1) {
	spans[i].addEventListener('mouseover',func,false);
}
}
window.onload=events;

<p>A<span class="del">X</span></p>
<p>B<span class="del">X</span></p>
<p>C<span class="del">X</span></p>
<p>D<span class="del">X</span></p>
<p>E<span class="del">X</span></p>
<p>F<span class="del">X</span></p>

如果您有任何疑问，请在下面留言，我会尽快给您回复。

我希望这会有所帮助。快乐的编码！

Answer 2

如果希望X在光标离开时返回白色，则还需要为每个元素添加mouseout的第二个事件监听器。

＆＃13;

function func() {
   this.style.backgroundColor = "red";
}
function funcOut() {
   this.style.backgroundColor = "white";
}
function events(){
var spans = document.getElementsByClassName("del");
var i;
for (i = 0; i < spans.length; i = i + 1) {
	spans[i].addEventListener('mouseover',func,false);
    spans[i].addEventListener('mouseout',funcOut,false);
}
}
window.onload=events;

＆＃13;

<p>A<span class="del">X</span></p>
<p>B<span class="del">X</span></p>
<p>C<span class="del">X</span></p>
<p>D<span class="del">X</span></p>
<p>E<span class="del">X</span></p>
<p>F<span class="del">X</span></p>

＆＃13;

Answer 3

阅读closures

var spans = document.getElementsByClassName("del");
var i;
for (i = 0; i < spans.length; i = i + 1) {
    (function(span) {
        function func(elem) {
            'use strict';
            elem.style.backgroundColor = "red";
        }
        span.onmouseover = func(span);
    })(spans[i]);
}

Answer 4

我测试你的代码，虽然我完全无法理解，但我发现有些东西可能会有所帮助。第一，

spans[0].onmouseover = func(spans[0]);

如果您这样编码，代码将立即运行，而不是当您将鼠标放在它上面时。如果您需要，您可以这样编码：

spans[0].onmouseover=function(){
     func(spans[0]);
}

但是，如果您在流通中编码，可能会导致另一个错误，例如

var spans = document.getElementsByClassName("del");
for (var i = 0; i < spans.length; i++) {
    spans[i].onmouseover=function(){
        console.log(i);         
    }
};

如果你运行这个例子，你会发现它输出不像'1,2,3 ..'，但总是输出'6'。关键是js中的范围链，如果你想了解它完全，你必须得到钥匙。

最后，我给出了一个问题的方法，这个方法使用匿名函数。

function func(elem) {
    'use strict';
    elem.style.backgroundColor = "red";
}
var spans = document.getElementsByClassName("del");
for (var i = 0; i < spans.length; i++) {
    spans[i].onmouseover=function(num){
        return function(){
            func(spans[num]);
        };
    }(i);
};

JS：在悬停物品上设置背景

4 个答案: