Question

它不允许我在脑海中完成滑块。我还想注意不要使用JQuery。仅限JavaScript。我尝试了很多方法，但没有生效。

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>

这是JSFiddle链接：https://jsfiddle.net/heybetov1998/camuyve2/4/

Answer 1

这是一个为你做的事件处理程序。

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

如果您愿意，我会留给您设置事件处理程序并找出遗留浏览器支持。

Answer 2

您可以在点上连接事件处理程序。在事件处理程序中，this将引用您附加处理程序的元素。然后，您可以从其他所有类中删除该类：

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>

如果您需要支持没有addEventListener的过时浏览器，this answer具有执行此操作的功能。

这是最小变化的版本。但是我会看到一些变化：

请勿使用setAttribute设置class属性。它在非常旧版本的IE上失败，但更重要的是，它完全取代了元素上的类。请看classList。
上面的示例将事件处理程序连接到每个点，但如果您有很多点，或者您动态添加/删除它们，那么最好使用事件委派通过挂钩点的容器上的处理程序，然后使用e.target来确定点击了哪个点。

Answer 3

使用addEventListener为您要添加的li元素的click事件分配侦听器。

在侦听器函数中，您可以删除所有li元素的活动类，然后仅将其添加到使用this单击的元素以引用它。

使用元素的classList属性在元素中添加/删除活动类。

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>

如何从所有li元素中删除除了单击的元素之外的活动类？

3 个答案: