javascript - 通过 JavaScript (EventHandler) 在 Accordion 中鼠标悬停时显示图标

Question

编辑更新： 删除原始问题并进行修改以使其更易于阅读。

好的，所以我想通了！或者有点！这是 JS 小提琴： https ://jsfiddle.net/reflexez/d7yvym8q/2/

var test = document.getElementById("what");
var accordionList = document.getElementsByClassName("accordion");
var i;
var j;

for(i=0; i < accordionList.length; i++) {
  accordionList[i].addEventListener("mouseenter", function() {

//document.getElementById("accordion-icon").style.display = "block";
var addIcon = this.firstChild.nextElementSibling;
addIcon.style.display = "block"
console.log(addIcon);
  });
}


for(j=0; j < accordionList.length; j++) {
  accordionList[j].addEventListener("mouseleave", function() {

    //document.getElementById("accordion-icon").style.display = "none";
    var removeIcon = this.firstChild.nextElementSibling;
    removeIcon.style.display = "none"
    console.log(removeIcon);
  });
}

我的网站： http ://alpizano.com

我是一个比较。工程专业的学生，​​已经学习了 Java 中的数据结构，但我从未正式学习过 JavaScript（现在自学），所以这就是为什么像这样微不足道的事情给我带来了问题。

如果你们能帮助我，我还有一个关于未来的问题。是从 for 循环访问的“当前”项（即 arrayList[i] 项，而不是 firstChild、parentNode、nextElementSibling 等）中获取信息的唯一方法吗？

这些功能对来自 Java 的我来说似乎真的很草率。我知道我已经使用节点和 LinkedList.getLink 完成了 LinkedLists 和类似的东西到列表中下一项的内容，但是如果 HTML 真的很草率，就像我的情况一样，我有多个 DIV，并且标签紧跟在 DIV 之后，然后是

标记，然后是另一个DIV，看起来如此令人毛骨悚然。

我想有一种方法可以像accordionList[i].getElementById("你想要的标签的ID在这里，就像在我的例子中的标签一样，因为我想将它从显示更改：无阻止");

显然它不是那样工作的，我不得不使用 firstChild.nextElementSibling 但我仍然想知道。是的，我目前正在阅读 Duckett 写的 JS 脚本书，实际上我觉得它并不好。

老实说，我明白为什么专业 JS 程序员在 chrome 和 console.log 中调试他们的输出，因为，我想出来的唯一原因是我输入了随机代码，并且是 console.log 杂项变量并在 chrome 中检查它们，我做了 .firstChild 并且它出现了 NULL，但是在 chrome 中，它说 .nextElementSibling 是我需要操作的标签。

无论哪种方式，我希望这对其他人有所帮助，我希望我提供研究和意图来编写代码，你们给我一个大拇指：D

标签： javascripteventsgetelementsbyclassname

Answer 1

首先 - 对于下一个问题，请提供一个完整的“工作”代码示例 - 您的 javascript 代码与您发布的 html 不同（例如，您访问的 idaccordion-icon在您的 html 中不可用。但是通过指向您网站的链接，我得到了良好的整体看法:)

主要问题是 - 你有多个带有 id 的元素accordion-icon- 不要那样做，ID 应该是唯一的 - > 所以我删除了 id 并将其作为附加类添加到图标中（见下面的截图）

第二件事是您只希望相应的图标可见。在您的事件侦听器回调函数中，您可以访问event.target哪些指向触发事件侦听器的元素（例如 current div.accordion）。从此元素中搜索下一个图标并仅显示/隐藏该图标。（见下文截图）

最后一件事 - 你需要在开始时隐藏图标 - 通过 js（如在我的示例中）或直接在每个图标上的 html 中进行

var test = document.getElementById("what");
var accordionList = document.getElementsByClassName("accordion");
var i;
var j;

//hide all icons first (or instead hide it directly via style in html)
var iconsList = document.getElementsByClassName("accordion-icon");
for(i=0; i < iconsList.length; i++){
  iconsList[i].style.display = "none";
}


for(i=0; i < accordionList.length; i++) {
  accordionList[i].addEventListener("mouseenter", function(event) {
    //only set style for the next icon (inside current accordion)
    event.target.getElementsByClassName('accordion-icon')[0].style.display = "block";
  });
}


for(j=0; j < accordionList.length; j++) {
  accordionList[j].addEventListener("mouseleave", function(event) {
    event.target.getElementsByClassName('accordion-icon')[0].style.display = "none";
  });
}

.panel {margin-bottom:30px;}

<div class="accordion">
    <i class="accordion-icon fas fa-arrow-down">icon1</i>
    Title of accordion box goes here, after arrow icon.
</div>        
<div class="panel">
    Text inside accordion goes here.
</div>

<div class="accordion">
    <i class="accordion-icon fas fa-arrow-down">icon2</i>
    Title of accordion box goes here, after arrow icon.
</div>        
<div class="panel">
    Text inside accordion goes here.
</div>

<div class="accordion">
    <i class="accordion-icon fas fa-arrow-down">icon3</i>
    Title of accordion box goes here, after arrow icon.
</div>        
<div class="panel">
    Text inside accordion goes here.
</div>