this.nextChild coming up mouseover/mouseout

this.nextChild coming up mouseover/mouseout

本文关键字：mouseout mouseover up nextChild coming this      更新时间：2023-09-26

我是一名学生，仍在学习，如果这是一个愚蠢的问题，我很抱歉。通常情况下，我可以通过筛选这里的其他问题来解决这个问题，但这次我似乎陷入了困境。

我只是想做一个简单的mouseover/mouseout，当你把鼠标悬停在图像上时，图像会消失，锚标记中的文本会变成链接的名称（即，将鼠标悬停在房子图标上，它会消失，并被"主页"取代）。我让这个部分工作得很好，但当鼠标离开链接时，我无法将其切换回图标。这是链接的当前HTML：

<li class="linksLi">
   <a id="#homeLink" data-namesrc="HOME" class="linksA">
      <img src="img/home.svg" alt="Home Icon" class="links">
   </a>
</li>

然后是javascript:

var linksImg = document.querySelectorAll(".links");
var linksName = document.querySelectorAll(".linksA");
function changeImg() {
    this.classList.add("hide");
    this.parentElement.innerHTML = this.parentElement.dataset.namesrc;  
}   
function changeName() {
    this.innerHTML = "";
    this.nextChild.classList.remove("hide");    
}

for (var i=0;i<linksImg.length;i++) {
    linksImg[i].addEventListener("mouseover", changeImg, false);
}
for (var j=0;j<linksName.length;j++) {
    linksName[j].addEventListener("mouseleave", changeName, false);
}

changeImg（）附加到img标记，changeName（）附加在anchor标记上。但我的问题是在changeName（）中，当我试图从孩子中删除类"隐藏"时，它会"告诉"我孩子是未定义的（尽管img标记显然在HTML中的a标记中）。我看到了很多关于节点和空白的东西，但我并不完全理解，所以我不知道这是不是问题所在？也许这是一个非常基本的问题，我错过了一些非常明显的东西，我不知道，但任何帮助都将不胜感激！

请只编写Java脚本，不要使用jQuery

尝试将事件作为函数的参数，并使用"event.target"而不是"this"

function changeImg(evt) {
    evt.target.classList.add("hide");
    evt.target.parentElement.innerHTML = evt.target.parentElement.dataset.namesrc;  
}

"this"在JavaScript中是一个棘手的关键字，根据函数的调用方式，它可能有很多内容。

给你一个JSFiddle。

编辑我已经更新了JSFiddle来添加/删除span，而不是设置innerHTML。

感谢您的回答！对于任何想知道的人来说，我还通过使img和anchor标记成为兄弟，而不是将img作为anchor标签的子级来实现它。这样，我就可以在js中针对nextSibling，innerHTML创建一个空的锚标记并删除img的问题就不再是问题了。

相关文章：