MouseOver 在 Rails 中切换一个 div

Question

我有一个从脚手架生成的Tasks 索引页。

为了使它更具视觉吸引力，我想隐藏编辑视图并删除链接，除非标题上有 mouseover 事件。

<% @tasks.each do |task| %>
  <tr>
    <td><%= task.name %> - <%= link_to 'Move onto '+task.name+' and start its clock', task_start_path(task) %></td>
    <td>/ <%= link_to 'Rename task', edit_task_path(task) %></td>
    <td>/ <%= link_to 'Check its clocks', task %></td>
    <td>/ <%= link_to 'Destroy task', task, :confirm => 'Are you sure?', :method => :delete %></td>
  </tr>
<% end %>

在index.html.erb 文件中是否有一种干净的方法来执行此操作，或者我是否需要调用一些自定义帮助程序 javascript 函数？

我找到了Hide a DIV [Rails]，但它会在单击而不是鼠标悬停时切换。

Answer 1

您应该在 rails 3 中使用 Unobtrusive JavaScript。您可以在要隐藏的元素上（或链接本身）上放置一个特殊的类。

类似：

<% @tasks.each do |task| %>
  <tr class="hide_on_hover">
    <td><%= task.name %> - <%= link_to 'Move onto '+task.name+' and start its clock', task_start_path(task) %></td>
    <td class="hideable">/ <%= link_to 'Rename task', edit_task_path(task) %></td>
    <td>/ <%= link_to 'Check its clocks', task %></td>
    <td class="hideable">/ <%= link_to 'Destroy task', task, :confirm => 'Are you sure?', :method => :delete %></td>
  </tr>
<% end %>

然后在您的 application.js 文件中添加 javascript 以在文档加载时触发，找到这些元素并添加悬停动作。如果您使用的是 JQuery（推荐），您可以在这里看到一个简单的方法（带有示例）： http://api.jquery.com/hover/