我有一个项目列表,其中包含一些我想在单击显示/隐藏详细信息链接时显示的详细信息。经过一些试验后,我遇到了两个问题。
我无法让显示/隐藏链接仅显示特定项目的 div。现在,当点击任何显示/隐藏链接时,它会显示所有的 div。
此外,必须有一种更优雅的方法来执行此操作,而无需执行循环来生成一堆 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>
最佳答案
在我看来,您所有的显示/隐藏链接都在调用相同的函数(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 上的选项)
关于ruby-on-rails - ruby "each do"和 scriptaculous Effect.BlindDown/Up,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2036282/