ruby​​“each do”and scriptaculous Effect.BlindDown/Up

Question

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

1. 我很难使它显示/隐藏链接只显示特定项目的div。现在，点击任何显示/隐藏链接时，它会显示所有div。

2. 此外，必须有一个更优雅的方式来做到这一点，而不需要做一个循环来生成一堆javascript。我看着效果。多种，但我不知道如何在这种情况下使用它。

一些洞察力或指向大方向将不胜感激！ 谢谢！

这里是供参考的代码。

    <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的，以及你的链接。嗯，你可以遮挡效果后抛出右：

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

等

或者你可以让其中找到所有的div和函数绑定到他们每个人的文档的onload功能一个JavaScript循环，但是这比我想要演示的要复杂得多，尤其是当你看起来并没有使用Prototype时（尽管你使用的是Scriptaculous？这应该让你访问.show（）/。hide（）助手......）

另外，为什么使用div？您可以直接链接到链接（请参阅link_to_function上的选项）