定位列表中的所有元素,但单击除外
Target all elements in a list excepted clicked
我玩 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-road — #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 中的“class”系统让我迷路了,因为我似乎无法成功定位我的元素。
我找不到“重现”each.not jquery 提供的方法。任何的想法?我应该先向点击的元素添加一个 class 然后 然后 定位所有没有这个“活动” class 的元素吗?有捷径吗?
非常感谢
要在 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>
你可以使用 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)
我玩 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-road — #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 中的“class”系统让我迷路了,因为我似乎无法成功定位我的元素。
我找不到“重现”each.not jquery 提供的方法。任何的想法?我应该先向点击的元素添加一个 class 然后 然后 定位所有没有这个“活动” class 的元素吗?有捷径吗?
非常感谢
要在 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>
你可以使用 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)