代码之家  ›  专栏  ›  技术社区  ›  cucucool

通过在Jade/Pug中循环数组来创建手风琴ID

  •  0
  • cucucool  · 技术社区  · 9 年前

    我有一个对象数组(组件),它的每个对象都有两个属性id和消息。我想为每个对象创建手风琴,如下所示:

    .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
    

    我得到了这个版本,但仍然不起作用。我在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} 
    
    1 回复  |  直到 9 年前
        1
  •  1
  •   Ha Huu Tin    9 年前
    href='#collapse#{item}'
    

    字符串中的变量不再呈现

    href='#collapse'+item
    

    我希望它会为你工作好!