javascript - this.nextChild 未定义 - mouseover/mouseout

Question

我是一名学生，仍在学习中，如果这是一个愚蠢的问题，我深表歉意。通常我可以通过在这里筛选其他问题来解决这个问题，但这次我似乎被卡住了。

我只是想做一个简单的鼠标悬停/鼠标移开，当您将鼠标悬停在图像上时，图像消失并且 anchor 标记中的文本更改为链接的名称(即，将鼠标悬停在房屋图标上并它消失并被“HOME”取代)。我让那部分工作正常，但是当鼠标离开链接时我无法让它切换回图标。这是链接的当前 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 标签内)。我已经看到很多关于节点和空白的东西，但我并不完全理解，所以我不知道这是否是问题所在？也许这是一个非常基本的问题，我遗漏了一些非常明显的东西，我不知道，但我们将不胜感激任何帮助!

请仅使用 JAVASCRIPT，不要使用 jQuery!

Answer 1

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

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

“this”在 JavaScript 中是一个棘手的关键字，它可以是很多东西，具体取决于函数的调用方式。

还有一个 JSFiddle给你。

编辑 我已经更新了 JSFiddle 以添加/删除跨度而不是设置 innerHTML。