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

Question

基本问题:我有一行文本，悬停时，我希望该文本更改为其他内容。基本的，对吧？让我感到困惑的是，有问题的文本存储在我的 Controller 中的散列中，我正在遍历它。

这是我的 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

然后在我看来(@team 定义为我的 PagesController 中的散列)，我正在循环为每个人创建一个关于页面条目。

    <% @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 元素中的值，在本例中将是 div 类 about-team ，无需真正更改 Rails Controller 。

存储值:

<% @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 个处理程序绑定(bind)到匹配的元素，因此您可以像上面的代码一样在鼠标悬停时执行交换逻辑。

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