翡翠:每4个元素循环一次，改变职业

Jade: Loop Through Every 4 Elements, Changing Class

本文关键字：一次 改变 4个 元素 循环 翡翠      更新时间：2023-09-26

我正在构建一个步骤测序器，我想使用Jade将子组中的每4个元素分组。到目前为止，我只能使用所需的类获取每个n 元素，但我知道有一种方法可以做到这一点。唯一的约束是我需要跟踪循环中的当前索引(从1到32)，以便我可以正确地为每个input元素添加唯一的id s。

我的代码到目前为止，奇怪的样式每个n+2元素:

- for (var i = 0; i < steps; i++)
                - if (i % 4 === 0 || altGroup % 2 === 0)
                  - stepClass="step even"
                  - altGroup++
                - else
                  - stepClass="step"
                input(type="checkbox", class = "#{stepClass}", id = "channel#{index}-step#{i}")
                label(for = "channel#{index}-step#{i}")
                  span.hook ^

看到这里的笔了吗

基于上面的交换，我将每个子组分成span元素，并使用sub-group类使其更清晰。请参阅此处更新的CodePen。

关键逻辑总结如下:

- for (var i = 0; i < steps/4; i++)
    - if (altGroup % 2 == 0)
        - stepClass = "step"
    - else
        - stepClass = "step even"
    span.sub-class
        - for (var j=0; j < groupSize; j++)
            input(type="checkbox", class = "#{stepClass}", id = "channel#{index}-step#{i}")
            label(for = "channel#{index}-step#{i}")
                span.hook ^
        - altGroup ++;

注意:我假设组大小是一个常量，并将其作为变量添加。

相关文章：