ruby-on-rails - ruby "each do"和 scriptaculous Effect.BlindDown/Up

Question

我有一个项目列表，其中包含一些我想在单击显示/隐藏详细信息链接时显示的详细信息。经过一些试验后，我遇到了两个问题。

1. 我无法让显示/隐藏链接仅显示特定项目的 div。现在，当点击任何显示/隐藏链接时，它会显示所有的 div。

2. 此外，必须有一种更优雅的方法来执行此操作，而无需执行循环来生成一堆 javascript。我查看了 effect.multiple，但我不确定如何在这种情况下使用它。

一些见解或指向一般方向将不胜感激!谢谢!

这是引用代码。

                    <script type="text/javascript">
      function show_details() {
            <% @posts.each do |b| %>
        Effect.BlindDown('details_<%= b.id %>', {duration:0.3});
        $('hide_details_link_<%=  b.id %>').style.display = 'inline';
        $('show_details_link_<%=  b.id %>').style.display = 'none';
        <% end %>
      }

      function hide_details() {
             <% @posts.each do |b| %>
        Effect.BlindUp('details_<%= b.id %>', {duration:0.3});
        $('hide_details_link_<%=  b.id %>').style.display = 'none';
        $('show_details_link_<%=  b.id %>').style.display = 'inline';
        <% end %>
      }
    </script>

 <ul id="posts">
  <% @posts.each do |b| %>
           <li>



    <div id="show_details_link_<%= b.id %>" style="display:inline;">
      <%= link_to_function "show details", 'show_details()' %>
    </div>

    <div id="hide_details_link_<%= b.id %>" style="display:none;">
      <%= link_to_function "hide details", 'hide_details()' %>
    </div>


    <div id="details_<%= b.id %>" style="display:none;">

      <p> <%= b.comments %></p>


    </div>



                    </li>
       <li><%= link_to b.title, {:action => 'show', :id => b.id} -%></li>

      <% end %>
     </ul>

Answer 1

在我看来，您所有的显示/隐藏链接都在调用相同的函数(show_details() 等)，它显示/隐藏所有帖子(因为循环)，而不是特定的帖子。与其为每个函数定义一个函数，更优雅的解决方法应该是这样的:

<%= link_to_function "show details", "Effect.BlindDown('details_<%= b.id %>', {duration:0.3});" %>

这当然不是不引人注目，但这是一个开始。

编辑

我刚刚注意到您也想为每个 div 显示隐藏的链接。好吧，你可以在 Blind 效果之后立即扔掉它:

<%= link_to_function "show details", "Effect.BlindDown('details_<%= b.id %>', {duration:0.3});$('hide_details_link_<%=  b.id %>').style.display = 'inline';" %>

等等

或者您可以在文档 onload 函数中创建一个 javascript 循环，它会找到所有 div 并将一个函数绑定(bind)到它们中的每一个，但这比我想展示的要复杂得多，尤其是当您似乎没有使用原型(prototype)(尽管您使用的是 Scriptaculous？那应该可以让您访问 .show()/.hide() 助手...)

此外，为什么要使用 div？你可以，但 id 就在链接上(参见 link_to_function 上的选项)