web-dev-qa-db-fra.com

Si la classeur contient plus d'une classe spécifique

J'ai besoin d'une fonction pour déclencher si l'élément recordplayerstick contient soit le class pinplace ou pinsongplay classe. Le code que j'ai actuellement renvoie une erreur de syntaxe. Quelle est la bonne façon de faire cela?

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

Utilisation ... ( Syntaxe Spread Syntaxe )

exemple 

const element = document.getElementById("left-sidebar");
const has_some = ["left-sidebar", "js-pinned-left-sidebar"];
const result = [...element.classList].some(className => has_some.indexOf(className) !== -1);  
// has_some.some(className => [...element.classList].indexOf(className) !== -1);
// or example like @Phil
// has_some.some(className => element.classList.contains(className))

Fonctions complètes 

/**
 * @description determine if an array contains one or more items from another array.
 * @param {array} haystack the array to search.
 * @param {array} arr the array providing items to check for in the haystack.
 * @return {boolean} true|false if haystack contains at least one item from arr.
 */
var findOne = function (haystack, arr) {
    return arr.some(function (v) {
        return haystack.indexOf(v) !== -1;
    });
};

/**
 * @description determine if element has one or more className.
 * @param {HTMLElement} element element where is going to search classNames.
 * @param {array} arrayClassNames Array of Strings, provide to search ClassName in the element
 * @return {boolean} true|false if element.classList contains at least one item from arrayClassNames.
 */
var checkElementHasSomeClassName = function (element, arrayClassNames) {
    // uncoment and use this return if you don't want the findOne function
    // return [...element.classList].some(className => arrayClassNames.indexOf(className) !== -1);
    return findOne([...element.classList], arrayClassNames);
};

Liens extras:

Syntaxe Syntaxe - Compatibilité du navigateur

Vérifiez si s'il existe un élément de la matrice dans un autre tablea

1
DarckBlezzer

Vous pouvez utiliser des expressions régulières:

let div = document.querySelector("div");

if ( /bubu|moo|bar/i.test(div.className) ) {
  console.log("ok (simple test)");
}

if ( /default|bar/i.test(div.className) ) {
  console.log("not-ok (partial match of `btn-default`)");
}

if ( /(?:^|\s)default|bar(?:\s|$)/i.test(div.className) ) {
  console.log("ok (not logging)");
  // ^ - the beginning of line | or \s space character.
  // space char | or $ - line ending
}

/***/

let names = ["btn", "bar", "bubu"];
let regex = new RegExp( "(?:^|\\s)" + names.join("|") + "(?:\\s|$)", "i");

if ( regex.test(div.className) ) {
  console.log("ok (new RegExp)");
}
<div class="btn btn-default bubu"></div>
0
OPTIMUS PRIME

DomTokenList

Il y a une manière directe d'accéder à un classList en utilisant l'interface DOMTokenList. Il a plusieurs méthodes et propriétés. La démo ci-dessous utilise la propriété .value pour extraire la liste, puis find() ou filter() Pour gérer plusieurs paramètres et includes() pour renvoyer la première trouvée des paramètres ou un Array de tous les paramètres trouvés.
[.____] Utilisation 

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"]*/

Démo

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>
0
zer00ne