我想将 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>
最佳答案
首先在 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>
关于javascript - 如何在鼠标悬停时将 innerHTML 添加到类中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58565627/