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

别忘了在pug中用逗号隔开。

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

1 个答案: