Question

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

使用数据集似乎可以工作，但是，我正在探索通过纯Javascript进行此操作的可能性。有效的行已被注释掉（var matchs = first.dataset.name === second.dataset.name;），而我上班时遇到的困难是（var matchs = 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>

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

Answer 1

使用数组展开 [...classList]将classList设为Array，然后检查每个成员是否都包含在另一个成员的classList中使用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>

Answer 2

考虑到注释，这可以独立于顺序解决问题。稍微更改了示例，以便可以执行。

//check for 2 matching squares
function checkIfMatches() {

  var elements = document.getElementsByClassName('card')
  var first = elements[0].getElementsByTagName('i')[0]
  var second = elements[1].getElementsByTagName('i')[0]
  var matches = first.classList.length === second.classList.length
  first.classList.forEach(entry => matches = matches && second.classList.contains(entry))
  console.log(matches)
  
  // matches ? disable() : unflip();

}

checkIfMatches()

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

尝试比较不同元素的类别

2 个答案: