不显眼的切换循环

Question

我在包含许多记录（订单）的视图中使用Unobtrusive Toggling。我已经让它在单个div上工作，但我现在希望它能够工作，因此每个Order可以在循环中使用自己的切换链接单独扩展/收缩（链接也是循环的）。

当我的可扩展div被称为x时，问题是切换按钮的每个循环只是在自己的迭代中切换第一个div而不是div - 我想最好的方法是使用order_id作为每个可扩展的标识符部？

更有经验的观众可能会嘲笑这个:)但我尝试使用以下代码：

<% for order in @orders do %>

# toggle
<a class="toggle" href="#<%= order.id %>" rel="toggle[<%= order.id %>]">Toggle</a>

# expandable div with its own nested toggle
<div id="<%= order.id %>" class="expand_me">
    # nested toggle inside the looping expandable div
    <a class="toggle" href="?" rel="toggle[?]">Toggle</a>
    <div id="?" class="expand_me">
    ...
    </div>
</div>

<% end %>

正如您所看到的，在每个循环中都有一些我希望能够切换的子部分。如果我必须能够在可扩展的循环div中切换多个div，解决方案将如何改变？这是因为如果我将主切换div称为order.id，那么我不知道如何引用多个内部div - 这显然是根据主要问题。

Answer 1

您是否考虑过像Jquery这样的JavaScript库？您应该能够这样做，而无需添加任何特殊的类或ID。如果<a>链接只是为了切换正在进行的<div>，那么您可以将JavaScript移动到DOM中的下一个元素。