javascript - 如何在鼠标悬停时将 innerHTML 添加到类中？

Question

我想将 innerHTML 添加到我的类中，而当我将鼠标悬停在它上面时不更改文本。

例如我有一个列表 <p>带有 class="food"的元素，当我将其悬停时，我希望它从说“Chicken”变为“Chicken [EAT]”。

这是我目前所拥有的，但是当我将鼠标悬停在段落上时，它会按预期更改为最后一个食品。

var food = document.getElementsByClassName("food");
var len = food.length;

for (i = 0; i < len; i++) {
  addEvent(food[i]);
  var foodName = food[i].innerHTML;

  function addEvent(food) {
    food.addEventListener("mouseover", function(event) {
      event.target.innerHTML = foodName + " [EAT]";
    });
  }
}

<p class="food">Snackbar</p>
<p class="food">Apple</p>
<p class="food">Pear</p>
<p class="food">Chicken</p>
<p class="food">Peas</p>

Answer 1

首先在 addEvent 中移动 var foodName = food.textContent;

也不要在循环内声明函数(不是问题的原因，但不是好的做法)

同样使用 textContent 而不是 innerHTML

var food = document.getElementsByClassName("food");
var len = food.length;

function addEvent(food){
    var foodName = food.textContent;
    food.addEventListener("mouseover", function(event){
        event.target.textContent = foodName + " [EAT]";
    });
}

for( i = 0; i < len ; i++){
    addEvent(food[i]);   
}

<p class="food">Snackbar</p>
<p class="food">Apple</p>
<p class="food">Pear</p>
<p class="food">Chicken</p>
<p class="food">Peas</p>