Question

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

我只是想做一个简单的鼠标悬停/鼠标移动，当你将鼠标悬停在图像上时，图像消失，锚标记中的文本变为链接名称（即将鼠标悬停在房子图标上它消失了，取而代之的是“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（）中，当我尝试从子节点中删除类“hide”时，它告诉我子节点是未定义的（即使img标签明显位于HTML中的标签内）。我已经看到很多关于节点和空白的东西，我并不完全理解，所以我不知道这是什么问题？也许这是一个非常基本的问题，我错过了一些非常明显的东西，我不知道，但任何帮助都会非常感激！

仅限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。

Answer 2

谢谢你的答案！对于任何想知道的人，我也通过制作img和anchor标签兄弟来实现它，而不是img是锚标签的孩子。这样我就可以在js中定位nextSibling，而innerHTML创建一个空锚标签并删除img的问题不再是一个问题。

this.nextChild即将发布未定义 - mouseover / mouseout

2 个答案: