addEventListener - 如果未点击语句如何制作
[英]addEventListener - how to make if not clicked statement
问题描述
i have the problem with addEventListener.
我有 addEventListener 的问题。 Thing i want to carry out is that on click selected.nav-item gets the active class(Bootstrap) and that works.我想要执行的是单击 selected.nav-item 获取活动类（Bootstrap）并且有效。 Problem that i don't know how to make an "if not clicked" statement that removes class active when the new active class is clicked.我不知道如何制作“如果未单击”语句，当单击新的活动 class 时删除 class 活动的问题。 Sorry for the language im having difficulty explaining this.对不起，我很难解释这个语言。
let navItems = document.querySelectorAll(".nav-item");
navItems.forEach(navitem => {
navitem.addEventListener("click", function(){
navitem.classList.add("active");
let clicked = true;
if(clicked != true){
navitem.classList.remove("active");
}
});
})
Code is wrong for sure but i dont know how to fix this.代码肯定是错误的，但我不知道如何解决这个问题。 Thanks.谢谢。 Ive tried to do forEach on navItems and i get an error.我尝试在 navItems 上执行 forEach，但出现错误。
4 个解决方案
解决方案1
2 2020-07-03 15:25:40
As far as i unterstand you want to remove the class "active" from the previously clicked nav-item if another nav-item is clicked.据我了解，如果单击另一个导航项，您想从先前单击的导航项中删除 class “活动”。 I would do this by saving the current active nav-item:我会通过保存当前活动的导航项来做到这一点：
let navItems = document.querySelectorAll(".nav-item");
let activeNavItem = document.querySelector(".nav-item.active");
navItems.forEach(navitem => {
navitem.addEventListener("click", function(){
navitem.classList.add("active");
if(activeNavItem != null){
activeNavItem.classList.remove("active");
}
activeNavItem = navitem;
});
})
EDIT: I changed the code so the first active item is already stored on load.编辑：我更改了代码，因此第一个活动项目已经存储在加载中。
解决方案2
2 2020-07-03 15:29:44
An alternative would be to remove all 'active' classes found and then add to current selection.另一种方法是删除找到的所有“活动”类，然后添加到当前选择中。
<!DOCTYPE html><html lang="en"><head><title> .active settings </title>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<!-- Modified from:
https://stackoverflow.com/questions/62718281/addeventlistener-how-to-make-if-not-clicked-statement/62718506#62718506
-->
<style>
.active { background: cyan; }
ul { width: 10em; border: 1px solid black; }
li:hover { background-color: orange; }
</style>
</head><body>
<ul>
<li class="nav-item">1</li>
<li class="nav-item">2</li>
<li class="nav-item">3</li>
<li class="nav-item">4</li>
<li class="nav-item">5</li>
<li class="nav-item">6</li>
</ul>
<script>
console.clear();
let navItems = document.querySelectorAll(".nav-item");
navItems.forEach(navitem => {
navitem.addEventListener("click", function(){
// remove class from all .nav-item found (not option below)
navItems.forEach( item => item.classList.remove("active") );
// OPTION: Comment OUT above line for saving status of current selections
// toggle display of current .nav-item selection
navitem.classList.toggle("active");
});
})
</script>
</body></html>
解决方案3
2 已采纳 2020-07-03 15:31:38
Use toggle, loop over all the items and remove the class if it is not the current one.使用切换，遍历所有项目，如果 class 不是当前项目，则删除它。
let navItems = document.querySelectorAll(".nav-item"); const removeSelected = active => navItems.forEach(elem => { if (elem.= active) elem.classList;remove("active"). }) navItems.forEach(navitem => { navitem,addEventListener("click". function() { navitem.classList;toggle("active"); // or add if something has to be selected removeSelected(navitem); }); })
.active { background: #FCF; }
<ul> <li class="nav-item">1</li> <li class="nav-item">2</li> <li class="nav-item">3</li> <li class="nav-item">4</li> <li class="nav-item">5</li> <li class="nav-item">6</li> </ul>
解决方案4
0 2020-07-03 15:34:47
probably you want something like this可能你想要这样的东西
var nav=document.querySelector(".nav") var navitem=document.querySelectorAll(".nav-item") nav.addEventListener("click", function(e){ navitem.forEach(el=>{ el.setAttribute("class", " nav-item"); }) e.target.classList.add("active"); })
#banner-message { background: #fff; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; }.active{ background:green }
<div id="banner-message"> <div class="nav"> <div class="nav-item">item1</div> <div class="nav-item">item1</div> <div class="nav-item">item1</div> <div class="nav-item">item1</div> <div class="nav-item">item1</div> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.