帕格：如何为id添加插值？

Question

最初的代码是这样的

.tab-content
    #session1.tab-pane.active(role='tabpanel')
        table#myTable1.table.table-striped.table-bordered(cellspacing="0" width="100%")
    #session2.tab-pane(role='tabpanel')
        table#myTable2.table.table-striped.table-bordered(cellspacing="0" width="100%")
    #session3.tab-pane(role='tabpanel')
        table#myTable3.table.table-striped.table-bordered(cellspacing="0" width="100%")
    #session4.tab-pane(role='tabpanel')
        table#myTable4.table.table-striped.table-bordered(cellspacing="0" width="100%")

我想把它转换成循环。如何处理每个标签的ID？

.tab-content
    each num in sessionsNumber
        if num == 1
            #session+num.tab-pane.active(role='tabpanel')
                table#myTable+num.table.table-striped.table-bordered(cellspacing="0" width="100%")
        else
            #session+num.tab-pane(role='tabpanel')
                table#myTable+num.table.table-striped.table-bordered(cellspacing="0" width="100%")

这是错的。我尝试了几种选择，但无法做到正确。

任何帮助将不胜感激！

Answer 1

要动态设置id，请使用id属性语法(id='myId')而不是id简写#myId：

.tab-content
    each num in sessionsNumber
        if num == 1
            #session1.tab-pane.active(role='tabpanel')
                table.table.table-striped.table-bordered(id=`myTable${num}`,cellspacing='0', width='100%')
        else
            .tab-pane(id=`session${num}`, role='tabpanel')
                table.table.table-striped.table-bordered(id=`myTable${num}`, cellspacing='0', width='100%')

这是使用javascript ternary operator为第一个选项卡窗格添加“活动”类的更简洁方法，因此您不必重复表标记：

.tab-content
    each num in sessionsNumber
        .tab-pane(id=`session${num}`, class= (1 == num) ? 'active' : '', role='tabpanel')
            table.table.table-striped.table-bordered(id=`myTable${num}`, cellspacing='0', width='100%')

不要忘记在哈巴狗中使用逗号分隔属性。