在与Jade Pug的循环中使用CSS id的变量

Question

我想在玉/哈巴狗中建立一个可折叠的div循环。

我正在使用翡翠npm软件包版本1.11.0

例如，这是我的第一次迭代，它正在工作：

button.btn.btn-primary(type='button', data-toggle='collapse', data-target='#response0', aria-expanded='false', aria-controls='collapseExample')
  | Show Response
#response0.collapse
  .well
    pre=response

不幸的是，当我尝试这个时

button.btn.btn-primary(type='button', data-toggle='collapse', data-target='#response0', aria-expanded='false', aria-controls='collapseExample')
  | Show Response
div(id= 'response0').collapse
  .well
    pre=session_detail.response

或者这个

button.btn.btn-primary(type='button', data-toggle='collapse', data-target='#response0', aria-expanded='false', aria-controls='collapseExample')
  | Show Response
.collapse(id= 'response0')
#response0.collapse
  .well
    pre=session_detail.response

html 输出看起来很棒，但折叠按钮不起作用。

我想构建的是这样有效的东西：

-var i = 0
-session_details.forEach(function(session) {
  .row
    .col-md-5
      pre=session_detail.response
      -var dataTarget='#response'+i
      -var dataTargetResponse='response'+i
      button.btn.btn-primary(type='button', data-toggle='collapse', data-target=#{dataTarget}, aria-expanded='false', aria-controls='collapseExample')
        | Show Response
      div(id= dataTargetResponse).collapse
        .well
          pre=session_
  -i++

你对我能做什么有什么想法吗？感谢您的帮助

Answer 1

在 pug 中使用 for 循环时，您需要创建一个数组。或者你可以使用 while，像这样的东西;

- var i = 0;
.row
  .col-md-5
    while i < 4
      .collapse(id='response' + i)
      i++

更多信息请访问 pugjs 迭代页面

Answer 2

您可以使用 Pug 的循环each遍历数组并处理该数组中的每个项目。

如果需要在这样的循环中

生成内容，每个循环中都有不同的 id，则可以在循环中使用数组的index，如以下示例所示：

- var sessions = [1, 2, 3, 4, 5];
each session,index in sessions
  button.btn.btn-primary(type='button', data-toggle='collapse', data-target= "#response"+index, aria-expanded='false', aria-controls='collapseExample')
    | Show Response
  .collapse(id= "response"+index)
    .well
      pre=response