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

我是Comp。工程专业的学生已经接受了Java中的数据结构，但我从未正式学过JavaScript（现在自学），这就是为什么像这样微不足道的东西给了我一些问题。

我仍然有一个问题，但如果你们可以帮助我，将来。是获取＆＃34;当前＆＃34;的信息的唯一途径。 for循环访问的项目，即arrayList [i]项，而不是firstChild，parentNode，nextElementSibling等......？

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

标签，然后是另一个DIV，它看起来很震撼。

我认为有一种方法可以像accordionList [i] .getElementById（＆＃34;你想要的标签的ID在这里，就像在我的情况下标签，因为我想从显示器更改它：none阻止＆＃34;）;

显然它没有那样工作，我不得不使用firstChild.nextElementSibling，但我仍然在想。是的，我现在正在阅读Duckett撰写的JS剧本，我实际上并没有发现它。

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

无论哪种方式，我希望这有助于其他人，我希望我提供研究和我打算用这个代码编写这个，你们给我竖起大拇指：D

Answer 1

首先 - 对于下一个问题，请提供完整的＆＃34;工作＆＃34;代码示例 - 您的javascript代码与发布的html代码不同（例如，您正在访问您的html中没有的ID accordion-icon。但是通过指向您网站的链接，我获得了良好的整体视图：）

主要问题是 - 您有多个ID为accordion-icon的元素 - 请勿这样做，ID应该是唯一的 - ＆GT;所以我删除了id并将其添加为图标的附加类（参见下面的剪辑）

第二件事是你只想看到相应的图标。在您的事件侦听器回调函数中，您可以访问指向触发事件侦听器的元素的event.target（例如，当前div.accordion）。从此元素中搜索下一个图标，仅显示/隐藏此图标。（见下面的剪辑）

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

＆＃13;

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";
  });
}

＆＃13;

.panel {margin-bottom:30px;}

＆＃13;

<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>

＆＃13;

鼠标悬停在手风琴中的显示图标通过JavaScript（EventHandler）

1 个答案: