Javascript addEventListener-如何生成if not clicked语句_Javascript_Addeventlistener

Javascript addEventListener-如何生成if not clicked语句

javascript

Javascript addEventListener-如何生成if not clicked语句,javascript,addeventlistener,Javascript,Addeventlistener,我对addEventListener有问题。我想执行的是，单击selected.nav项将获得活动的类引导，这是有效的。问题是，我不知道如何使if not clicked语句在单击新的活动类时删除活动类。对不起，我的语言很难解释 let navItems = document.querySelectorAll(".nav-item"); navItems.forEach(navitem => { navitem.ad

我对addEventListener有问题。我想执行的是，单击selected.nav项将获得活动的类引导，这是有效的。问题是，我不知道如何使if not clicked语句在单击新的活动类时删除活动类。对不起，我的语言很难解释

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

代码肯定是错误的，但我不知道如何解决这个问题。谢谢我尝试在navItems上执行forEach操作，但出现了一个错误。

据我所知，如果单击了另一个导航项，您希望从先前单击的导航项中删除活动的类。我将通过保存当前活动的导航项来完成此操作：

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

编辑：

我更改了代码，因此第一个活动项已加载存储。

另一种方法是删除找到的所有“活动”类然后添加到当前选择

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

使用toggle，循环所有项，如果类不是当前类，则删除该类

让navItems=document.queryselectoral.nav-item； const removeSelected=active=>navItems.forEachelem=>{ 如果elem！=active elem.classList.removeactive； } navItems.forEachnavitem=>{ navitem.addEventListenerclick，函数{ navitem.classList.toggleactive；//如果必须选择某些内容，则添加删除选定的导航项； }; } .active{background:FCF；} 1. 2. 3. 4. 5. 6.

也许你想要这样的东西

var nav=document.querySelector.nav var navitem=document.queryselectoral.nav-item nav.addEventListenerclick，函数E{ navitem.forEachel=>{ el.setAttributeclass，导航项目； } e、 target.classList.addactive； } 横幅信息{ 背景：fff；边界半径：4px；填充：20px；字体大小：25px；文本对齐：居中；过渡：均为0.2s；保证金：0自动；宽度：300px； } .主动{ 背景：绿色 } 项目1 项目1 项目1 项目1 项目1

此问题中没有节点或表达式使用toggle代替navitem.classList.toggleactive@epascarello的问题是，有3个导航项目，如果我使用“切换”，它们可以全部处于活动状态，也可以全部不处于活动状态。想法是1个处于活动状态，其他2个不处于活动状态。因此，您可以选择其他项目并移除该类。好的，这解决了大部分问题。当页面加载导航项[0]时，它是activeHOME，如果没有首先单击它，它将不会删除活动类，对于导航项[1]和导航项[2]，它可以工作。请您解释一下这行代码removeSelected=active=>navItems.forEach。我不知道active=>navItems在本例中的含义。函数removeSelected active{navItems.forEach functionelem{}；}修改为维护多个选择以及仅显示一个选择