Javascript 如何在鼠标悬停时向类添加innerHTML？

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

例如，我有一个带有class=“food”的

元素列表，当我将其悬停时，我希望它从“Chicken”变为“Chicken[EAT]”

到目前为止，这就是我所拥有的，但当我在段落中悬停时，它会像预期的那样变成最后一种食物

var food=document.getElementsByClassName（“food”）；
var len=食物长度；
对于（i=0；i

零食吧

苹果

梨

鸡肉

---

Peas

第一步

var foodName=food.textContent内部addEvent

也不要在循环中声明函数（这不是问题的原因，但不是良好实践）

也可以使用textContent而不是innerHTML


var food=document.getElementsByClassName（“food”）；
var len=食物长度；
功能补充剂（食品）{
var foodName=food.textContent；
食品。添加事件列表（“鼠标悬停”，功能（事件）{
event.target.textContent=foodName+“[EAT]”；
});
}
对于（i=0；i

零食吧

苹果

梨

鸡肉

Peas

如果您只想显示“[EAT]”，那么使用CSS就可以很容易地做到这一点，无需JS：

.food:hover:：after{
内容：“[吃]”；
}

零食吧

苹果

梨

鸡肉

豌豆

var food=document.getElementsByClassName（“food”）；
var len=食物长度；
对于（i=0；i

零食吧

苹果

梨

鸡肉

---

Peas

这最终是因为范围界定问题。您正在for循环内调用一个方法，但是您引用的变量的作用域是封闭函数，或者在本例中是全局变量，因为没有函数（请参见注释），所以指定的最终值是for循环的最后一次传递。将

var foodName

的声明更改为

let foodName

，也可以通过将变量限定到循环中来解决问题。另一个选项是将需要的内容传递到

addEvent

，并将函数移出for循环

var food=document.getElementsByClassName（“food”）；
var len=食物长度；
对于（i=0；i

零食吧

苹果

梨

鸡肉

豌豆试试（仅css）

.food:hover:：after{
内容：“[吃]”
}

零食吧

苹果

梨

鸡肉

---

豌豆

你太接近了问题在于，您在循环闭包问题中遇到了经典变量。您的一个

i

变量将在循环的所有迭代中共享，并且由于您的mouseover回调函数引用

i

，因此该变量不会被垃圾收集，只要具有mouseover回调的DOM元素在内存中，该变量就会一直保留在内存中。因为回调直到循环完成后才会运行，所以它们都引用了循环完成时的相同

i

值，这就是为什么总是得到最后一个食物项

只需将变量声明从

var

更改为，问题就解决了

let

创建“块级”范围——循环的每个迭代都为循环变量创建自己的范围，因此，不是所有迭代都共享相同的

i

值，而是每个迭代都获得自己的

i

值

var food=document.getElementsByClassName（“food”）；
var len=食物长度；
对于（i=0；i

零食吧

苹果

梨

鸡肉

---

豌豆比你快2分钟！但是您正在引用一个变量，该变量的作用域位于for循环的内部。该变量是用

var

声明的，因此它的作用域不是循环，而是封闭函数，如果没有函数，则是全局的。问题是

i

周围有一个闭包。将

var

更改为

let

会将变量的作用域设置为循环，并将解决问题。@ScottMarcus感谢您的澄清。这应该是公认的答案。人们应该停止在任务中使用错误的技术。你真的应该使用CSS而不是Javascript来完成这项工作，除非你想在悬停时进行永久性的更改。