javascript - 如何检查元素类子项是否具有特定类

Question

我之前阅读过一些关于此的主题，但这是我第一次尝试应用它，但我对如何检查某个元素是否有子类并向其中添加一些新类感到很困惑。

假设我想在单击它后将 active 类添加到 li 子元素。这是我想一步一步做的:

1. 点击后检查li元素中是否有active类
2. 如果没有则添加active类，如果已经存在则return或什么都不做

对于 1 我读了这个主题 check-if-an-element-contains-a-class-in-javascript但我很困惑如何检查 child

对于 number 2 我已经为它创建了函数但是我很困惑我必须把它放在我的代码中的什么地方

这是我的 html:

<li id="test" class="additional-menu"><a href="#">Link1</a>
  <ul>
    <li class="active"><a href="#" id="">Home</a></li>
    <li><a href="#">Career</a></li>
    <li><a href="#">Privacy Policy</a></li>
  </ul>
</li>

这是我的CSS:

.active{
  color: red
}

这是我检查 child 的js:

// This is for check a normal class but I doesn't know how to check a child class element from this

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

var el = document.getElementById('test');

alert(hasClass(el, 'active'));


// I can use this function if it inside button using onClick
// But I got quite confused of how to use it without button

function addClass () {
    var x = document.getElementsById("test")[0]; 
    x.className += ' active';
}

有人可以帮我理解这个吗？出于你的想象，我想使用它制作一个导航栏，当我移动到不同的路由时，类仍然存在 假设我在 home 我希望类留在 home 如果我在 career 我希望类(class)留在那儿。我觉得我已经在那里解决了它，但仍然没有运气

Answer 1

• 首先将点击监听器附加到所有点击的直接父级元素。
• 然后通过遍历所有子元素来移除“active”类。
• 最后，将事件类添加到您在点击事件本身中收到的目标

document.addEventListener('DOMContentLoaded', ()=>{
  // event attached to parent for getting clicks of all child while bubbling
  document.querySelector(".parent").addEventListener("click", (event)=>{
    event.preventDefault(); //prevent default "a" tag redirect
    
    let target = event.target;
    
    if(target.tagName != "A"){
      return; // to make sure only <a> is been clicked
    }
    target = target.parentElement; //make related li as target now
    
    for(let li of target.parentElement.children){ //all child of parent ul
      li.classList.remove("active");
    }
    target.classList.add("active");
  });

});

.active{
  color: red
}

<li id="test" class="additional-menu"><a href="#">Link1</a>
  <ul class="parent">
    <li class="active"><a href="#" id="">Home</a></li>
    <li><a href="#">Career</a></li>
    <li><a href="#">Privacy Policy</a></li>
  </ul>
</li>