javascript - 元素修饰符 classList.add 和 classList.remove 未按预期工作

Question

我有一个元素列表 (ul, li)，其中一个类在您单击该元素时设置左边框和粗体突出显示。

当您单击列表中的不同项时，我想将样式重置为原始项，使其恢复正常，然后在刚刚单击的事件项上设置新样式。

奇怪的是 DOM 检查显示之前点击的元素仍然有更改的类，但是当我输出到控制台时它说没有。

 function myFunctionTest(id_word) {
  var items = document.getElementsByClassName("process-itemz");
         for (var i = items.length - 1; i >= 0; --i) {
         items[i].classList.remove("test123");
}

var element = document.getElementById(id_word);
  element.classList.add("test123");

}

还有一把 fiddle :https://jsfiddle.net/y5kwmu6j/

Answer 1

两件事:

element.classList.add = "test123"; 应该是 element.classList.add("test123");

您应该更改 css 规则的顺序，使 .test123 规则位于 .process-itemz 规则之后。它们具有相同级别的特异性，因此较晚的将获胜。