javascript - 尝试比较不同元素的类别
问题描述
我正在寻找一种方法来检查元素中的类是否与另一个元素中的类匹配。我试过使用下面的代码:
使用数据集似乎可行,但是,我希望探索通过纯 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>
谢谢你的帮助。如果需要更多详细信息,您可以发表评论。
解决方案
使用Array spread [...classList]
制作classList
an 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>
推荐阅读
- database - UML 类图多重性和 ER 图基数
- javascript - 如何从关联模型中获取对象?
- sas - 使用 SAS 宏创建动态数据集名称
- javascript - 复杂 Firestore 查询的替代方案
- forms - 什么是 copyWith,我如何在 Flutter 中使用它,它的用例是什么?
- spring - [qaf]使用testng xml运行黄瓜测试用例时如何与spring集成
- c# - 在 C#.net 中打印时应用程序冻结
- java - Junit / Java为void创建测试方法并出现异常
- android - 对于 Flutter,Expanded 和 GridView 有意外填充
- javascript - 使用 ajax 请求进行事件传播