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的同一个类但是它们里面的img标签呢？有没有办法在Jade中简单地使用它？提前致谢

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

Answer 1

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

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)

每个div内部带有img标签的多个Div与Jade Html预处理器分开

1 个答案: