javascript - 如何在 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

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，则需要迭代该类string 就像您已经在做的那样 - 但不要每次旧类名存在时都添加新类名，这就是您获取这些重复项的方式。我还没有测试过，但这应该适用于 IE9，它支持 querySelectorAll ——如果你需要 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>