Question

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

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

<% @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/

MouseOver在Rails中切换div

1 个答案: