Question

如何将“color”函数应用于受“mouseover”影响的元素。

    var els = document.getElementsByClassName("issue-link");
    var colors = ["red","green","orange","yellow","satin","grey","purple","brown","sky-blue","dark-green"];
    var message = "<p>Hello!</p>";

    function color() {
    for (i = 0; i < els.length; i++) {
        var colorNr = Math.floor(Math.random() * 9);
        els[i].innerHTML = message;
        els[i].style.color = colors[colorNr];
        }
    }

for (i = 0; i < els.length; i++) {
    els[i].onmouseover = color;
}

Answer 1

在该函数中，您挂接事件的元素可用作this。所以：

function color() {
    this.innerHTML = message;
    this.style.color = colors[Math.floor(Math.random() * colors.length)];
}

实例：

var els = document.getElementsByClassName("issue-link");
var colors = ["red", "green", "orange", "yellow", "satin", "grey", "purple", "brown", "sky-blue", "dark-green"];
var message = "<p>Hello!</p>";

function color() {
  this.innerHTML = message;
  this.style.color = colors[Math.floor(Math.random() * colors.length)];
}

for (var i = 0; i < els.length; i++) {
  els[i].onmouseover = color;
}

<div class="issue-link">link</div>
<div class="issue-link">link</div>
<div class="issue-link">link</div>
<div class="issue-link">link</div>
<div class="issue-link">link</div>
<div class="issue-link">link</div>
<div class="issue-link">link</div>
<div class="issue-link">link</div>
<div class="issue-link">link</div>
<div class="issue-link">link</div>
<div class="issue-link">link</div>

另请注意，通过不在循环中声明i，您的代码将成为The Horror of Implicit Globals 的牺牲品（这是我贫血小博客上的帖子）。声明你的变量。

另请注意我是如何使用colors.length而不是硬编码9的，因此如果您向数组添加颜色，代码会自动处理它，而无需更改9到10。

Answer 2

真正的答案（T. J. Crowder更快）：

function color() {
    var colorNr = Math.floor(Math.random() * 9);
    this.style.color = colors[colorNr];        
}

在事件处理程序调用的函数中，这是单击的对象...

我的原创，完全被误解的答案：

您需要以某种方式将颜色绑定到您的元素。我的代码通过绑定来实现它，还有其他可能性，比如使用IIFE或使用Array.prototype.forEach。顺便说一句，我扩展了你的代码而没有注意到......

var els = document.getElementsByClassName("issue-link");
var colors = ["red","green","orange","yellow","satin","grey","purple","brown","sky-blue","dark-green"];
var message = "<p>Hello!</p>";

function color() {
this.el.style.color=this.color;   
}

for (i = 0; i < els.length; i++) {
els[i].onmouseover = color.bind({el:els[i],color:colors[i]||"blue"});
}

在FOR循环的特定元素上启动事件函数

2 个答案: