Javascript Vanilla JS-可以在子元素上添加/删除类，但所有元素都处于活动状态

我可以添加和删除子元素上的类，但所有类都处于活动状态。我试图一次只添加和删除一个活动元素。我错过了什么

<ul id="parent" class="container">
  <li class="child"><a href="#one">one</a></li>
  <li class="child"><a href="#two">two</a></li>
  <li class="child"><a href="#three">three</a></li>
</ul>


document.addEventListener("DOMContentLoaded", function() {

  const parent = document.querySelector('#parent');
  parent.style.backgroundColor = 'blue';
  const childrens = document.querySelectorAll('.child');
  const child = document.querySelector('.child a')

  Array.prototype.forEach.call(
   document.querySelectorAll('.child'),
    function(element) {
      element.onclick = addActive;
    }
  );

 function addActive(element){
  element = this;
   if(element.classList.contains('active')) {
    element.classList.remove('active');
   } else {
    element.classList.add('active');
   }
 }
});

document.addEventListener（“DOMContentLoaded”，function（））{
const parent=document.querySelector（“#parent”）；
parent.style.backgroundColor='blue'；
const childrens=document.querySelectorAll（'.child'）；
const child=document.querySelector（“.child a”）
Array.prototype.forEach.call(
document.querySelectorAll（'.child'），
功能（元素）{
element.onclick=addActive；
}
);
函数addActive（元素）{
元素=此；
if（element.classList.contains（'active'））{
element.classList.remove（'active'）；
}否则{
element.classList.add（'active'）；
}
}
});

---

下面是一个：

现在，您只从单击的元素添加/删除活动类。在将单击的类设置为活动之前，必须从所有元素中删除该类

e、 g

---

一种解决方案是首先从所有元素中删除

活动

类：

function addActive(element) {

  childrens.forEach(function(elem) {
    elem.classList.remove("active");
  });

  element = this;
  if (element.classList.contains("active")) {
    element.classList.remove("active");
  } else {
    element.classList.add("active");
  }
}

---

这里有一个。

这里可能是使用纯js切换子元素的最直接的方法

<ul id="parent" class="container">
 <li class="child"><a href="#one">one</a></li>
 <li class="child"><a href="#two">two</a></li>
 <li class="child"><a href="#three">three</a></li>
</ul>

<script>
//get children 
var theChildren = document.querySelector('#parent').children;

//set event listener for to each child
function selectChild(child) {
child.addEventListener('click', function() {
    var checkChildStatus = document.querySelector('#parent .selected');
    if (checkChildStatus) {
        checkChildStatus.classList.remove('selected');
    }
    
    child.classList.add('selected');        
 });
}

//loop through all children
[...theChildren].forEach(selectChild);
</script>

//生孩子
var theChildren=document.querySelector（“#parent”）.children；
//为每个子级设置事件侦听器
函数selectChild（child）{
addEventListener（'click'，function（）{
var checkChildStatus=document.querySelector（“#parent.selected”）；
如果（检查儿童状态）{
checkChildStatus.classList.remove（'selected'）；
}
child.classList.add（'selected'）；
});
}
//遍历所有的孩子
[…孩子].forEach（选择孩子）；

<ul id="parent" class="container">
 <li class="child"><a href="#one">one</a></li>
 <li class="child"><a href="#two">two</a></li>
 <li class="child"><a href="#three">three</a></li>
</ul>

<script>
//get children 
var theChildren = document.querySelector('#parent').children;

//set event listener for to each child
function selectChild(child) {
child.addEventListener('click', function() {
    var checkChildStatus = document.querySelector('#parent .selected');
    if (checkChildStatus) {
        checkChildStatus.classList.remove('selected');
    }
    
    child.classList.add('selected');        
 });
}

//loop through all children
[...theChildren].forEach(selectChild);
</script>