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

Question

如何将“颜色”功能仅应用于受“鼠标悬停”影响的元素。

    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

在函数中，您 Hook 事件的元素可用作 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。