如何在鼠标悬停时将 innerHTML 添加到 class？

Question

当我在 hover 上时，我想将 innerHTML 添加到我的 class 而不更改文本。

例如，我有一个带有 class="food" 的<p>元素列表，当我使用 hover 它时，我希望它从说“Chicken”到“Chicken [EAT]”到 go。

这是我到目前为止所拥有的，但是当我 hover 段落时，它按预期更改为最后一个食物项目。

 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

第一步var foodName = food.textContent; 在 addEvent 里面

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

也使用 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>

Answer 2

如果您只想显示“[EAT]”，您可以使用 CSS 轻松完成，无需 JS：

 .food:hover::after { content: " [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 3

 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 = event.target.innerHTML+ " [EAT]"; }); food.addEventListener("mouseleave", function(event){ event.target.innerHTML = event.target.innerHTML.replace(" [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 4

这最终是因为范围界定问题。 您在 for 循环中调用了一个方法，但是您引用了一个范围为封闭 function 的变量，或者在这种情况下是全局变量，因为没有 function （请参阅注释），因此分配的最终值是最后一次传递for 循环。 将var foodName的声明更改为let foodName也可以通过将变量限定为循环来解决问题。 另一种选择是将您需要的内容传递给addEvent并将 function 移出 for 循环。

 var food = document.getElementsByClassName("food"); var len = food.length; for (i = 0; i < len; i++) { var foodName = food[i].innerHTML; addEvent(food[i], foodName); } function addEvent(food, name) { food.addEventListener("mouseover", function(event) { event.target.innerHTML = name + " [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 5

你这么近！ 问题是您在闭环问题中遇到了经典变量。 您的一个i变量在循环的所有迭代中都被共享，并且因为您的鼠标悬停回调 function 引用i ，所以该变量不会被垃圾收集并保留在 memory 中，只要具有 mouseoever 回调的 DOM 元素位于 ZC1C425268E68385D1AB5074C17A94F100 而且因为回调在循环完成后才会运行，所以它们都引用循环完成时的相同i值，这就是为什么你总是得到最后一个食物的原因。

只需将变量声明从var更改为let即可解决问题。 let创建“块级” scope - 循环的每次迭代都会为循环变量创建自己的 scope，因此不是所有迭代共享相同的i值，而是每次迭代都有自己的i值。

 var food = document.getElementsByClassName("food"); var len = food.length; for (i = 0; i < len; i++) { addEvent(food[i]); let 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 6

永远不要使用innerHTML

我得到它; 许多教程网站使用它，因为他们没有专业的理解。 某些浏览器在添加到 DOM 时未正确注册 XML，因此如果您尝试引用通过innerHTML添加的id ，即使您确信不是在 DOM 中，它也不会注册并且看起来好像它不在 DOM 中。

您要求更改文本，但我也会回答您继承的第二个问题。

在 DOM 中操作textNode时，您应该使用element.firstChild.nodeValue尽管获取和/或设置更简单的方法是使用textContent 。

假设您的其他代码是正确的，您将要使用：

event.target.textContnt = foodName + " [EAT]";

关于从 JavaScript 和/或 AJAX 添加 HTML 我只是在这里发布了一个专业的答案：

如何使用 JavaScript 在 <div> 中加载 HTML 页面？

Answer 7

尝试（仅限 CSS）

 .food:hover::after { content: ' [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>