javascript - How to remove active class from all li elements except one that clicked? - Stack Overflow

admin管理员组

文章数量:1317909

It doesn't let me to plete slider in my mind. And I also want to note that not use JQuery. Only with JavaScript. I tried many ways, but it didn't take effect.

var ul = document.querySelector('ul');
var dots = [];

for (var i = 0; i < 5; i++) {
  var dot = document.createElement('li');
  dots.push(dot);
  ul.appendChild(dot);
}
dots[2].setAttribute('class', 'active');

li {
  width: 20px;
  height: 20px;
  background-color: lightgrey;
  text-decoration: none;
  display: inline-block;
  border-radius: 100%;
  margin-right: 15px;
}

.active {
  background-color: grey;
}

<ul></ul>

It doesn't let me to plete slider in my mind. And I also want to note that not use JQuery. Only with JavaScript. I tried many ways, but it didn't take effect.

var ul = document.querySelector('ul');
var dots = [];

for (var i = 0; i < 5; i++) {
  var dot = document.createElement('li');
  dots.push(dot);
  ul.appendChild(dot);
}
dots[2].setAttribute('class', 'active');

li {
  width: 20px;
  height: 20px;
  background-color: lightgrey;
  text-decoration: none;
  display: inline-block;
  border-radius: 100%;
  margin-right: 15px;
}

.active {
  background-color: grey;
}

<ul></ul>

Here is JSFiddle link: https://jsfiddle/heybetov1998/camuyve2/4/

• javascript

Share Improve this question Follow edited Aug 18, 2017 at 16:06 halfer 20.3k1919 gold badges109109 silver badges202202 bronze badges asked Aug 18, 2017 at 15:47 Adil HeybetovAdil Heybetov 2311 silver badge88 bronze badges 3

• 1 You've tagged jQuery, but there's no jQuery code in your question. – T.J. Crowder Commented Aug 18, 2017 at 15:49
• 1 "And I also want to note that not use JQuery." Then don't tag jQuery!! I've removed it for you, along with all of the other irrelevant tags you've used. – T.J. Crowder Commented Aug 18, 2017 at 15:50
• well, you don't seem to have tried addEventListener? – kukkuz Commented Aug 18, 2017 at 15:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Here's an event handler that will do it for you.

function handler(event) {
  for (const li of document.querySelectorAll("li.active")) {
    li.classList.remove("active");
  }
  event.currentTarget.classList.add("active");
}

I'll leave it to you to set up the event handler and figure out about legacy browser support if you wish.

You can hook up an event handler on the dots. Within the event handler, this will refer to the element on which you attached the handler. Then you can remove the class from all the others:

var ul = document.querySelector('ul');
var dots = [];

for (var i = 0; i < 5; i++) {
  var dot = document.createElement('li');
  dot.addEventListener("click", clickHandler); // ** Hook up the handler
  dots.push(dot);
  ul.appendChild(dot);
}
dots[2].setAttribute('class', 'active');

// Here's the handler
function clickHandler() {
  var dots = document.querySelectorAll("li");
  for (var n = 0; n < dots.length; ++n) {
    if (dots[n] !== this) {
      dots[n].className = "";
    }
  }
  this.className = "active";
}

li {
  width: 20px;
  height: 20px;
  background-color: lightgrey;
  text-decoration: none;
  display: inline-block;
  border-radius: 100%;
  margin-right: 15px;
}

.active {
  background-color: grey;
}

<ul></ul>

If you need to support obsolete browsers that don't have addEventListener, this answer has a function for doing that.

That's the minimal-changes version. But there are several changes I'd look at making:

• Don't use setAttribute to set the class attribute. It fails on very old versions of IE, but more importantly, it pletely replaces the classes on the element. Look at classList.

• The example above hooks up an event handler to each dot, but if you have a lot of dots, or you add/remove them dynamically, you might be better off using event delegation by hooking up the handler on the container of the dots and then using e.target to determine which dot was clicked.

Use addEventListener to assign a listener to the click event of the li element you're adding.

Within the listener function you can remove the active class for all li elements and then add it only to the one clicked using this to refer to it.

Use the classList property of the element to add/remove the active class from the element.

var ul = document.querySelector('ul');
var dots = [];

function dotClicked() {
  dots.forEach(function(li) {
    li.classList.remove("active");
  });
  this.classList.add("active");
}

for (var i = 0; i < 5; i++) {
  var dot = document.createElement('li');
  dot.addEventListener("click", dotClicked);
  dots.push(dot);
  ul.appendChild(dot);
}

li {
  width: 20px;
  height: 20px;
  background-color: lightgrey;
  text-decoration: none;
  display: inline-block;
  border-radius: 100%;
  margin-right: 15px;
}

.active {
  background-color: grey;
}

<ul></ul>

本文标签： javascriptHow to remove active class from all li elements except one that clickedStack Overflow