javascript - 使用 Jade Html 预处理器分别在每个 div 内包含一个 img 标签的多个 Div

Question

我的代码:

<div id="cubeSpinner">
    <div class="face one">
        <img src="/images/Windows%20Logo.jpg" class="">
    </div>
    <div class="face two">
        <img src="/images/Turtle.jpg" class="">
    </div>
    <div class="face three">
        <img src="/images/Rainbow%20Worm.jpg" class="">
    </div>
    <div class="face four">
        <img src="/images/Birdman.jpg" class="">
    </div>
</div>

如何使用 Jade 来简化它？我知道我可以像这样对多个 div 的同一个类使用 for 循环，但是它们里面的 img 标签怎么样？有没有办法在 Jade 中简单地实现这一点？提前致谢

- for(var x = 1;x <= 3;x++)
    .nameOfClass

Answer 1

如果您将如下所示的对象数组传递给您的 Jade 模板

var images = [
    {"src": "example1.Jpg", "className":"one"},
    {"src": "exampl2.Jpg", "className":"two"},
    {"src": "exampl3.Jpg", "className":"three"}, 
    {"src": "exampl4.Jpg", "className":"four"}
]

在您的模板中，您可以像这样显示它

div.cubeSpinner 
    each image in images 
        div.fade(class=image.className)
            img(src=image.src)