Question

所以在我目前的rails应用程序中，我正在努力允许用户创建活动和类别。类别的行为有点类似于用户可以使用它们对活动进行排序的文件夹。

我遇到的困难是不知道如何用HTML实现这个。我知道您可以使用“each”循环打印出数据库中每个类别或活动的名称。我正在使用Bootstrap样式表，它有一个“崩溃”类，我打算用它来实现类别。

但是，为了使用“折叠”类，它需要一个“href”面板，它将切换显示/隐藏。当尝试使用“每个”循环时，结果是类别名称将以“折叠”作为数据切换打印出来，但每个类别将引用同一个面板。这意味着我无法列出属于每个类别的活动，因为他们只会切换显示/隐藏单个共享面板。

如果我使用不正确的措辞来描述我遇到的问题，我很抱歉，但这里有一些pictures to show what I mean

如果我在“每个”循环中有两个不同的面板并创建两个“折叠”数据切换实例以将它们链接到相应的面板，则可以很容易地修复图片中的问题。但是，这是一个临时修复，因为当允许用户创建多个类别时，我需要为每个类别创建单独的面板以供参考。

基本上，我需要能够为属于公共类别的每组活动创建单独的面板，然后将每个面板链接到相应的活动。由于我对HTML和Rails的了解有限，我无法想到解决方案或如何解决这个问题。任何帮助或建议将不胜感激，谢谢

类别显示代码：

<body>
<div class="panel-body">
  <h2 align = "center">Categories</h2>
</div>
<% @categories.each do |cat| %>
    <div class="panel-group">
      <div class="panel-group">
        <div class="panel text-center">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" href="#collapse1">
                <%= cat.c_name %>
              </a>
            </h4>
          </div>
          <div id="collapse1" class="panel-collapse collapse">
          <ul class="list-group">
            <li class="list-group-item">Activity One</li>
            <li class="list-group-item">Activity Two</li>
            <li class="list-group-item">Activity Three</li>
          </ul>
          <div class="panel-footer">Activities</div>
        </div>
        </div>
      </div>
    </div>
<% end %>
</body>

Answer 1

您可以使用在HTML中使用id时应该执行的唯一ID。

<a data-toggle="collapse" href="#collapse1">

这一行的问题在于它是硬编码的，必须是动态的：

<a data-toggle="collapse" href="#collapse<%= cat.id%>">

这样，每个切换href都有一个基于对象id列的唯一ID。

您还必须更改此行：

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

相同：

<div id="collapse<%= cat.id %>" class="panel-collapse collapse">

Rails - 每个对象的各个部分？

1 个答案: