有没有办法在 Rails 中实现仅文本的image_tag类型鼠标悬停？JavaScript 和 CSS 解决方案不起作用

Question

基本问题：我有一行文本，在悬停时，我希望该文本更改为其他内容。基本，对吧？让我感到困惑的是，有问题的文本存储在我的控制器中的哈希中，我正在循环浏览它。

这是我的PagesController中哈希的较小版本：

def team_list
    return [ {
        name: "Employee 1",
        title: "Founder and CEO",
        secret_title: "Something Funny",
        image: "about-employee-color.jpg",
        alt_image: "about-employee-alt.jpg"
      },
      {
        name: "Employee 2",
        title: "Not Founder and CEO",
        secret_title: "Something Else Funny",
        image: "about-employee2-color.jpg",
        alt_image: "about-employee2-alt.jpg"
      } ]
end

因此，在我看来（在我的 PagesController 中@team定义为该哈希），我正在循环为每个人创建一个关于页面条目。

    <% @team.each do |member| %>
    <div class="about-team">
      <%= image_tag member[:image], :mouseover => member[:baby_pic] %>
      <%= image_tag member[:baby_pic], :style => "display:none;" %>
      <h2><%= member[:name] %></h2>
      <h4><%= member[:title] %></h4>
      <h4 style="display:none;"><%= member[:secret_title] %></h4>
    </div>
    <% end %>

我正在尝试看看是否有一个简单的解决方案，就像我的 image_tag ：mouseover 一样，让我的标题在悬停时更改为secret_titles。我首先尝试了CSS，类似于这个。但是我不能只是将该成员变量放入 CSS 中，因为它在该循环之外不存在。我想JavaScript也会是同样的方式。

    h4:hover { content:<%= member[:secret_title] %>; } 

无论如何，我希望的是像我还没有遇到过text_tag这样的东西，它具有与image_tag类似的 ：mouseover 属性。

Answer 1

您可以使用 JQuery 功能交换直接存储为 DOM 元素中的属性的值，在这种情况下，这将是与类 about-team div，而无需真正更改 rails 控制器。

存储值：

<% @team.each do |member| %>
<div class="about-team" member-title="<%= member[:title] %>" secret-title="<%= member[:secret_title] %>">
  <%= image_tag member[:image], :mouseover => member[:baby_pic] %>
  <%= image_tag member[:baby_pic], :style => "display:none;" %>
  <h2><%= member[:name] %></h2>
  <h4><%= member[:title] %></h4>
</div>
<% end %>

交换值（JQuery 定义一次）：

    $('.about-team h4').hover(
      function(){     //mouse enter
          $(this).html($(this).parent().attr('secret-title'));
      },    
      function(){     //mouse leave
          $(this).html($(this).parent().attr('member-title'));        
      }    
    );

API 文档中定义的 JQuery hover事件将 2 个处理程序绑定到匹配的元素，因此您可以在鼠标悬停和悬停时执行交换逻辑，如上面的代码所示。

JSFIDDLE： http://jsfiddle.net/VmqB7/4/