javascript - Vanilla JS - Can addremove class on child elements but all are active - Stack Overflow

admin管理员组

文章数量:1279014

I am able to add and remove the classes on the child elements but all are active. I am trying to add & remove only on one active element at a time. What am I missing?

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

Here's a: codepen

I am able to add and remove the classes on the child elements but all are active. I am trying to add & remove only on one active element at a time. What am I missing?

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

Here's a: codepen

• javascript
• events
• children

Share Improve this question Follow asked Oct 29, 2017 at 5:45 TYPOITYPOI 38922 gold badges66 silver badges1919 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Right now you're adding/removing the active class only from the clicked element. You'll have to remove the class from all elements before you set the clicked one as active.

e.g.

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

One solution is to remove the active class from all elements first:

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

Here is a working Codepen example.

Here maybe the most straight forward way to toggle through your child elements using pure 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>

本文标签： javascriptVanilla JSCan addremove class on child elements but all are activeStack Overflow