Question

我想通过mixin创建一个这样的导航栏：

<ul class="pets">
    <li><a(class="cat",href="a")>cat</a></li>
    <li><a(class="dog",href="a")>dog</a></li>
    <li><a(class="pig",href="a")>pig</a></li>
</ul>

我尝试写这个，但不正确：

mixin pets(pets,links)
  ul.pets
    - each pet,p in pets,links
      - var f = '<a(class="'+pet+'",href="'+p+'")>'
      li!= f + pet+'</a>'
+pets(['cat', 'dog', 'pig'],['a','a','a'])

这就是结果：

<ul class="pets">
    <li><a(class="cat",href="0")>cat</a></li>
    <li><a(class="dog",href="1")>dog</a></li>
    <li><a(class="pig",href="2")>pig</a></li>
</ul>

我不知道该怎么做，请帮帮我... :(
谢谢你的阅读！

Answer 1

您将p（每次迭代中的pets数组的索引）呈现给输出。您可以在每次迭代中简单地渲染链接数组的pth元素，而不是这样做。

mixin pets(pets, links)
   ul.pets
     - each pet,p in pets
       - var f = '<a (class="'+pet + '", href="'+ links[p] +'")>'
       li!= f + pet + '</a>'

+pets(['cat','dog','pig'],['a','a','a'])

使用Jade中的Mixin创建导航栏

1 个答案: