Question

我开始使用香草JS，所以不要生气;）尝试编写tic tac toe游戏。

我有这个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 - 但是控制台给了我：“未捕获的TypeError：无法读取属性'包含'未定义在checkHowManyEmpty“。知道为什么吗？

Answer 1

为什么要在循环中执行检查，而不是让选择器引擎完成工作？这毕竟是它的最佳优化......

document.querySelectorAll('div.cel.empty').length会在一个简单的方法调用中告诉您这些empty元素中是否存在类div.cell的元素。

你的评论中的函数示例 - 不必要的其他 - 如果用简单的其他替换：

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');
    }
}

Answer 2

我认为你实际上是这样做的:(你应该访问集合的当前索引）

// ...
if (fieldEmptyElements[i].classList.contains('empty')) {
// ...

Answer 3

fieldEmptyElements是一个数组。要访问数组中的项，您需要索引，在您的情况下，该索引是i变量。对于循环的每次迭代，我都会增加1。

if (fieldEmptyElements[i].classList.contains('empty'))

这样您就可以使用当前索引访问数组项。

Answer 4

document.querySelectorAll（）返回一个节点列表。然后，您将查看节点列表的classList属性。这是错误的，因为您需要检查节点列表中的每个元素，然后检查其classList。

在for循环中，您将使用var i索引节点列表。

fieldEmptyElements [I] .classList

搜索div是否包含类（vanilla js）

4 个答案: