javascript - 通过在 Jade/Pug 中循环数组来创建折叠 ID

Question

我有一个对象数组(组件)，它的每个对象都有 2 个属性 id 和 message。我想为每个对象创建 Accordion ，如下所示:

.alert.alert-danger(style='background-color: #ff8080; color:white; width:70%')
  #headingOne.panel-heading(role='tab', style='text-align: left')
    h4.panel-title
      a(role='button', data-toggle='collapse', data-parent='#accordion', href='#collapseOne', aria-expanded='true', aria-controls='collapseOne')
        i.more-less.glyphicon.glyphicon-plus
        |                Title
  #collapseOne.panel-collapse.collapse(role='tabpanel', aria-labelledby='headingOne')
    .panel-body Content

其中每个 Accordion 的 id 是动态的，并且是从我正在迭代的对象设置的。我已经验证对象数组具有有效元素，但无法动态生成 ID。任何帮助表示赞赏。

我已经到了这个版本，但它仍然不起作用。我在 NodeJS 服务器上得到的只是 - 内部错误

#accordion.panel-group(role='tablist', aria-multiselectable='true', align='center')
  each item in [1,2,3]
    .alert.alert-danger(style='background-color: #ff8080; color:white; width:70%')
      #headingOne.panel-heading(role='tab', style='text-align: left')
        h4.panel-title
          a(role='button', data-toggle='collapse', data-parent='#accordion', href='#collapse#{item}', aria-expanded='true', aria-controls='collapse#{item}')
            i.more-less.glyphicon.glyphicon-plus
            |                   Title
      div(id="collapse#{item}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne")
          div(class="panel-body")
            !{item} 

Answer 1

href='#collapse#{item}'

字符串中的变量不再呈现

如果您使用的是 Pug 2.0。只需按照以下方式更改您的代码即可

href='#collapse'+item

希望它对您有用!