我是从 vanilla JS 开始的,所以别生气 ;) 尝试编写井字游戏代码。
我有这个 HTML:
<div class="container">
<div class="row">
<div class="cel empty" id="a1">
<p>x</p>
</div>
<div class="cel empty" id="a2">
x
</div>
<div class="cel empty" id="a3">
x
</div>
</div>
<div class="row">
<div class="cel empty" id="b1"> x</div>
<div class="cel empty" id="b2"> x</div>
<div class="cel empty" id="b3"> x</div>
</div>
<div class="row">
<div class="cel empty" id="c1"> x</div>
<div class="cel empty" id="c2"> x</div>
<div class="cel empty" id="c3">x </div>
</div>
</div>
还有这个 JS:
var fieldEmptyElements = document.querySelectorAll('div.cel');//pobieram divy które zawierają klasę empty
window.addEventListener('load', checkHowManyEmpty);//po załadowaniu strony wczytuje funkcję o nazwie checkHowManyEmpty
//funkcja ma za zadanie sprawdzić jak dużo pól div ma klasę empty
function checkHowManyEmpty(){
for(var i=0, max=fieldEmptyElements.length; i<max; i++){
if(fieldEmptyElements.classList.contains('empty')){
alert('there is one element with empty class');
}
else{
alert('no element with empty class');
}
}
}
函数需要检查是否有任何元素具有 EMPTY 类 - 但控制台给了我这个:“未捕获的类型错误:无法读取未定义的属性‘包含’ 在 checkHowManyEmpty”。知道为什么吗?
最佳答案
为什么要在循环中自己执行检查,而不让选择器引擎来完成工作?毕竟这就是它的优化目的......
document.querySelectorAll('div.cel.empty').length
会告诉你 div.cell 中是否有类为
一个简单的方法调用中的元素。empty
的元素
评论中的函数示例 - 不必要的 else-if 替换为简单的 else:
function checkHowManyEmpty() {
var fieldEmptyElements = document.querySelectorAll('div.cel.empty');
if (fieldEmptyElements.length >= 1) {
console.log('at least one element');
} else {
console.log('no empty elements');
}
}
关于javascript - 搜索 div 是否包含类(vanilla js),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48289161/