this.nextChild 出现 undefined - mouseover/mouseout答案

【问题标题】：this.nextChild coming up undefined - mouseover/mouseoutthis.nextChild 出现 undefined - mouseover/mouseout
【发布时间】：2016-02-20 10:52:01
【问题描述】：

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

我只是想做一个简单的鼠标悬停/鼠标移出，当您将鼠标悬停在图像上时，图像会消失，并且锚标记中的文本会更改为链接的名称（即，将鼠标悬停在房屋图标上，然后它消失并被“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() 附加到锚标签。但我的问题在于 changeName()，当我尝试从子项中删除“隐藏”类时，它告诉我子项未定义（即使 img 标记明显位于 HTML 中的 a 标记内）。我已经看到很多关于节点和空白的东西我不完全理解，所以我不知道这是否是问题所在？也许这是一个非常基本的问题，我错过了一些非常明显的东西，我不知道，但任何帮助将不胜感激！

请只使用 JAVASCRIPT，不要使用 jQuery！

【问题讨论】：

没有什么比得上.nextChild - developer.mozilla.org/en-US/docs/Web/API/Node
欢迎来到stackoverflow ;)

标签： javascript undefined parent-child mouseover mouseout

【解决方案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。

【讨论】：

感谢您的建议和 JSFiddle，但不幸的是它的工作方式与我最初发布的代码相同。
您正在设置 this.innerHTML = ""，从而移除了子元素。

【解决方案2】：

感谢您的回答！对于任何想知道的人，我还通过使 img 和锚标签同胞而不是 img 成为锚标签的子标签来使其工作。这样我就可以在 js 中定位 nextSibling，innerHTML 创建一个空的锚标记并删除 img 的问题不再是问题。

【讨论】：