Question

H！我是大安，我做作业...

我基本上需要遍历所有.block类，并将阶段从stage1更改为stage2（第二个代码块），但这一切都很好，但是我找不到需要从drukblokken [i]中提取类的部分。进行更改，然后检查是否需要更改。

也许我可以潜入另一个问题，如果一次for循环只遍历每个.block元素，那会很棒，因为我多次调用了循环函数

function loop()
{    


    drukBlokken = document.querySelectorAll(".block");

    for(i = 0; i < drukBlokken.length; i++)
    {                
        drukBlokken[i].addEventListener('click', function(){

            moveFunction = stageVeranderen(drukBlokken[i]);

        });
        console.log("button", i, "ready");


    }                
}

function stageVeranderen(blok)
{                  
    console.log("test");
}

loop();

<div id="divBlokken">

    <div class="row">
        <div class="block stage1"></div>
    </div>

    <div class="row">
        <div class="block stage2"></div>
    </div>

    <div class="row">
        <div class="block stage3"></div>
    </div>

</div>

我并不是真正的JavaScript高手，大多数事情我还没有讲授，但是我希望这不是迷失的原因，嘿嘿

Answer 1

首先在点击处理程序中，您可以使用关键字this代替drukBlokken[i]。因为该功能的范围已经设置为drunkBlokken[i]。

让我回答您的要求：

您可以使用.className来检查元素类，它返回在所选元素上使用的类的字符串。如果有多个类，则将返回与html语法相同的单个字符串。如果要遍历某个元素上的所有类，则可以使用。classList，它返回元素上使用的类的数组。因此，要在第二个函数中使用类，您可以仅使用blok.className。然后检查它等于什么，并使用.className将此元素类再次更改为新的元素类。可以说blok.className = 'second-class';
仅在元素数量动态的情况下才循环遍历您的列表（假设新元素会在一段时间后出现）。您可以将选择器更改为document.querySelectorAll(".block:not([data-parsed])")。这表示为：获取所有未在其上进行属性数据分析的类块的元素。一旦您在循环中解析了元素，就可以使用{{ 1}}。在将此属性添加到元素后，选择器将不再查询它。在这里，您还可以使用附加到元素的自定义类，但这可能会给类检查代码带来一些问题。很好，没有问题，但是在检查哪个类元素具有时必须记住这一点。

如何取出并更改“ drukBlokken [i]”的类

1 个答案: