Pug：如何为 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 shorthand #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 为第一个选项卡窗格添加 "active" class 的更简洁的方法，这样您就不必重复 table标记：

.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%')

不要忘记在 pug 中用逗号分隔属性。

Pug：如何为 id 添加插值？

Pug: How to add interpolation for id?

pug