以列表中除单击之外的所有元素为目标

Question

我在jQuery上玩了很长时间，但终于学会了干净的Vanilla JS。

我有一个元素列表：

<div id="seriesList" class="seriesList rollable">
<div class="seriesLink" series="7">
<a href="#carrow-road"><h3 class="name">Carrow Road</h3><p class="location">Norwich</p></a>
</div>
<div class="seriesLink" series="6">
<a href="#white-lane"><h3 class="name">White Heart Lane</h3><p class="location">London</p></a>
</div>
<div class="seriesLink" series="5">
<a href="#parc-des-princes"><h3 class="name">Parc des Princes</h3><p class="location">Paris</p></a>
</div>
</div

在点击一个.seriesLink后，我正在切换一系列的GSAP动画。我试图实现的第一个目标是让点击后的所有元素都消失。即：我点击#carrow路——#white lane和#parc des princes就会消失。

我有这个：

document.querySelectorAll(".seriesLink").forEach(item => {
item.addEventListener('click', event => {
// ForEach.Not ?
document.getElementById("seriesList").classList.toggle("rollable");
document.getElementById("home").classList.add("scrollable");
document.getElementById("rightPanel").classList.remove("scrollable");
tlOpenSeries.play();
})
})

"；类"；Javascript中的系统让我迷失了方向，因为我似乎无法成功地针对我的元素。

我找不到"；"再现"；each.not-jquery提供了。知道吗？我应该先向点击的元素添加一个类，然后然后以没有这个"类"的所有元素为目标吗；活动的"；班有捷径吗？

非常感谢

Answer 1

要在vanilla JS中实现这一点，您必须循环遍历元素，并检查当前元素是否不是单击的元素。

演示：

var divs = document.querySelectorAll(".seriesLink");
divs.forEach(item => {
item.addEventListener('click', event => {
for(var i = 0; i < divs.length; i++){
if(event.currentTarget != divs[i]){ // check here
divs[i].style.display = "none";
}
}

//.......
//.......
});
});

<div id="seriesList" class="seriesList rollable">
<div class="seriesLink" series="7">
<a href="#carrow-road"><h3 class="name">Carrow Road</h3><p class="location">Norwich</p></a>
</div>
<div class="seriesLink" series="6">
<a href="#white-lane"><h3 class="name">White Heart Lane</h3><p class="location">London</p></a>
</div>
<div class="seriesLink" series="5">
<a href="#parc-des-princes"><h3 class="name">Parc des Princes</h3><p class="location">Paris</p></a>
</div>
</div>

Answer 2

您可以使用filter:

const seriesLinks = document.querySelectorAll(".seriesLink");
seriesLinks.forEach(item => {
item.addEventListener('click', event => {

seriesLinks
.filter(i => i != item)
.forEach(i => // your logic... //);
//... rest of your code ... //
})
})

但是，我认为一个好的做法是将代码拆分为简单的小函数，例如hideAllExceptCurrent (allElemArray, currentElem)、hideAllToggleCurrent (allElemArray, currentElem)