如何在JavaScript中仅添加一次类？

Question

我已经写了下面的代码：

var reachedElement = document.querySelector(`[data-index='${elementInfo.elementIndex}']`);
var elementClass = reachedElement.className.split(' ');

for (var className of elementClass) {
  if (className !== 'myClass') {
    reachedElement.className += ' myClass';
  }
}

说明：我选择一个元素，然后使用split方法将所有类放入数组中，并检查它们是否具有myClass。如果他们有我什么都不愿做，但如果没有，我想添加我的班级，我的问题是，当我的元素没有任何班级或只有一个以上班级时，它将无法正常工作并添加与数组一样多的值。怎么了？ 图片：

Answer 1

如果您需要一个示例，请按此处。按照您的问题，您可以执行以下操作：

var reachedElements = document.querySelectorAll(`[data-index='${elementInfo.elementIndex}']`);
reachedElements.forEach((element) => element.classList.add("myClass"))

仅当不存在的类时，才添加该类。您可以阅读classList here

的文档

Answer 2

Element.classList具有add()，remove()和toggle()功能可以为您解决这些问题：

let reachedElements = document.querySelectorAll(`[data-index='1']`); // switched to querySelectorAll, so you can do more than one element at a time
reachedElements.forEach(function(el) {
  el.classList.add('myClass'); // duplicates on the same element are automatically prevented
})

// proof:
console.log(document.getElementById('container').innerHTML)

.myClass {
  color: #0F0
}

<div id="container">
  <div data-index="1" class="myClass foo bar baz">x</div>
  <div data-index="1" class="myClass">x</div>
  <div data-index="1">x</div>
  <div data-index="1">x</div>
  <div data-index="1" class="foo bar">x</div>
</div>

旧的浏览器

IE 9和更低版本是唯一不支持classList的仍然存在的浏览器（IE10具有部分支持，足以满足上述要求。）如果需要支持旧的IE，则需要遍历该类。字符串就像您已经做的一样-但是不要在每次存在旧的类名时都添加新的类名，这就是您获得这些重复项的方式。我还没有测试过，但是它应该在支持querySelectorAll的IE9中可以正常工作-如果您需要IE8或更低版本，则需要历史学家来帮助您，我忘记了所有这些东西：

var reachedElements = document.querySelectorAll(`[data-index='1']`); 

reachedElements.forEach(function(el) {
   // read the classes into an array:
   var classArr = el.className.split(' ');
   // add the new class if it's not already in the array:
   if (classArr.indexOf("myClass") === -1) {
      classArr.push("myClass");
      el.className = classArr.join(" ");
   }
})

// proof:
console.log(document.getElementById('container').innerHTML)

.myClass {
  color: #0F0
}

<div id="container">
  <div data-index="1" class="myClass foo bar baz">x</div>
  <div data-index="1" class="myClass">x</div>
  <div data-index="1">x</div>
  <div data-index="1">x</div>
  <div data-index="1" class="foo bar">x</div>
</div>