首页 > 解决方案 > 尝试比较不同元素的类别

问题描述

我正在寻找一种方法来检查元素中的类是否与另一个元素中的类匹配。我试过使用下面的代码:

使用数据集似乎可行,但是,我希望探索通过纯 Javascript 来实现这一点的可能性。有效的行被注释掉了(var matches = first.dataset.name === second.dataset.name;),我难以开始工作的行是(var matches = first.classList === second .classList;)

javascript:

//check for 2 matching squares
function checkIfMatches() {

  //var matches = first.dataset.name === second.dataset.name;
  var matches = first.classList === second.classList;
  matches ? disable() : unflip();

}

html:

<li class="card">
   <i class="pa pa-test"></i>
</li>

<li class="card">
   <i class="pa pa-test"></i>
</li>

谢谢你的帮助。如果需要更多详细信息,您可以发表评论。

标签: javascript

解决方案


使用Array spread [...classList]制作classListan Array,然后检查每个成员是否包含在classList另一个 using 中Array.prototype.every()

function sameClassList({classList: x},{classList: y}) {
  return [...x].every(z=>y.contains(z)) 
    && [...y].every(z=>x.contains(z));
}

console.log(sameClassList(a,b)); // true
console.log(sameClassList(a,c)); // false
console.log(sameClassList(b,c)); // false
<div class="foo bar" id="a"></div>
<div class="bar foo" id="b"></div>
<div class="foo bar baz" id="c"></div>


推荐阅读