this.nextChild即将上架undefined - mouseover/mouseout

我是一名学生，仍在学习，所以如果这是一个愚蠢的问题，我很抱歉。通常情况下，我可以通过筛选其他问题来解决这个问题，但这次我似乎陷入了困境。this.nextChild即将上架undefined - mouseover/mouseout

我只是想做一个简单的鼠标悬停/鼠标悬停，当你将鼠标放在图像上时，图像消失，锚标记中的文本变为链接名称（即悬停在房屋图标上并且它消失并被“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 ONLY请不要jQuery！

来源

2015-11-18 aramjam

没有什么像'.nextChild' - https://developer.mozilla.org/en-US/docs/Web/API/Node – Andreas

欢迎使用stackoverflow;） – www139

尝试采取的事件作为一个参数的功能和使用“event.target”，而不是“本”

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

“本”是在JavaScript中一个棘手的关键字可以是取决于很多的东西函数如何被调用。

和JSFiddle给你。

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

来源

2015-11-18 16:13:22 Arg0n

谢谢你的建议和JSFiddle，但不幸的是其工作原理与我最初发布的代码相同。 – aramjam

您正在设置this.innerHTML =“”，从而删除该子项。 – Arg0n

谢谢你的答案！对于任何人想知道，我也通过使img和锚标签兄弟姐妹，而不是img是锚标签的孩子工作。这样，我可以将目标定位到js中的nextSibling，并且innerHTML创建一个空锚标记并移除img的问题不再是问题。

来源

2015-11-20 19:17:38 aramjam

this.nextChild即将上架undefined - mouseover/mouseout

回答

相关问题