Если список классов содержит более одного определенного класса

Question

Мне нужна функция для запуска, если элемент recordplayerstick содержит класс pinplace или pinsongplay. Код, который у меня есть, возвращает синтаксическую ошибку. Как правильно это сделать?

if (document.getElementById('recordplayerstick').classList.contains('pinplace pinsongplay')) {
    removepin();
}

Answer 1

Поскольку Element.classList.contains принимает только одно имя класса, вам необходимо проверять каждое в отдельности.

Вы можете использовать Array.prototype.some(), чтобы избежать написания группы или условий

const el = document.getElementById('recordplayerstick')
const classNames = ['pinplace', 'pinsongplay']
if (classNames.some(className => el.classList.contains(className))) {
  removeping()
}

Answer 2

DOMTokenList

Существует прямой способ доступа к classList с помощью интерфейса DOMTokenList. У него есть несколько методов и свойств. Демонстрация ниже использует свойство .value для извлечения списка, а затем find() или filter() для обработки нескольких параметров и includes() для возврата первого найденного параметра или массива всех найденных параметров.
Использование

findClass(selector, array, all)
/*
CSS selector string of tag. ex. "#target"
Array of classes            ex. ["bullseye", "miss"]
Optional: default false: 
                  Returns the first class found.         ex. "bullseye"
                  true: 
                  Returns all classes found as an array. ex. ["bullseye", "miss"]*/

---

Демо

const findClass = (selector, array, all) => {

  let DTL = document.querySelector(selector).classList.value;
  console.log(`DOMTokenList: ${DTL}`);

  if (all) {
    return array.filter((tok) => DTL.includes(tok));
  } else {
    return array.find((tok) => DTL.includes(tok));
  }
};

console.log(findClass('div', ['two', 'four']));

console.log(findClass('div', ['two', 'four'], true));

<div class='one two three four five'></div>

Answer 3

Вам придется сделать две проверки, если вы собираетесь использовать classList.

function removepin() {
  console.log("yep");
}
var cList = document.getElementById('recordplayerstick').classList;
if (
  cList.contains('pinplace') ||
  cList.contains('pinsongplay')) {
  removepin();
}

<div id="recordplayerstick" class="pinplace pinsongplay"></div>