Question

我正在使用bootstrap折叠项目，并将代码设置为：

<% @tasks.each do |task| %>
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapse1"><%= task.title %><p style="text-align:right;"><span class="glyphicon glyphicon-chevron-down"></span></p></a>
          <p class="taskdescription"><%= task.description %></p>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <ul class="list-group">
          <% task.subtasks.each do |subtask| %>
            <li class="list-group-item"><%= subtask.title %></li>
          <% end %>
        </ul>
      </div>
    </div>
  </div>
<% end %>

哪个输出正确的列表，但每个项目需要增加div的值：

<div id="collapse1" class="panel-collapse collapse">

到

<div id="collapse2" class="panel-collapse collapse">

然后

<div id="collapse3" class="panel-collapse collapse">

依此类推，直到从集合中显示每个项目。

由于

Answer 1

使用each_with_index do |element, index| do ....

这是您可以访问元素索引并可以将其用作任何rails变量。

＆＃13;

 <% @tasks.each_with_index do |task, index| %>
        <div class="panel-group">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" href="#collapse1"><%= task.title %><p style="text-align:right;"><span class="glyphicon glyphicon-chevron-down"></span></p></a>
                <p class="taskdescription"><%= task.description %></p>
              </h4>
            </div>
            <div id="collapse<%= index +1 %>" class="panel-collapse collapse">
              <ul class="list-group">
                <% task.subtasks.each do |subtask| %>
                  <li class="list-group-item"><%= subtask.title %></li>
                <% end %>
              </ul>
            </div>
          </div>
        </div>
      <% end %>

＆＃13;

Answer 2

你可以使用each.with_index(1)循环并使用计数器变量i在生成的html上动态附加计数器。

<% @tasks.each.with_index(1) do |task, i| %>
  <div class="panel-group">
    <div class="panel panel-default">
      ...
      <div id="collapse#{i}" class="panel-collapse collapse">
        ...
      </div>
    </div>
  </div>
<% end %>

在每个do循环上更改div id

2 个答案: