Rails3:鼠标悬停时改变表列的内容



给定一个带有表的简单视图:

        <% entries.each do |entry| %>
            <tr>
                <td class="align-left"><%= entry.date.strftime("%d.%m.%Y") %></td>
                <td class="align-right><%= my_number_to_currency entry.amount_calc %></td>
                <td class="align-left"><%= entry.description %></td>
                <td class="align-left"><%= entry.tag %></td>
            </tr>   
        <% end %>   

我想将第二列的内容(对于每个条目)更改为my_number_to_currency条目。鼠标悬停时运行时的量,鼠标再次离开时变回原始值。此外,我想添加另一种样式,要么class="over",要么直接设置元素的颜色。

如果你能指点我如何在Rails3中最好地实现这一点(如果只需要一个视图,那么应该把代码放在哪里),我将不胜感激。

(备注:my_number_to_currency是一个简单的助手,只需考虑正常的number_to_currency,我添加了jquery标签,因为我已经使用它进行自动完成,因此如果对解决方案有帮助,它是可用的)

更新

我在application.js中尝试了以下操作,成功了:

$(document).ready(function() {
    $(".joint").hover(
        function() { $(this).children(".full").show(); $(this).children(".half").hide(); },
        function() { $(this).children(".half").show(); $(this).children(".full").hide(); }
    );
});

这可能不是你想要的,但是如果我在你的位置上…

我将为<td>提供默认值和鼠标悬停值,并使用jQuery hide()和show()来隐藏和显示值。这样,无论用户是否启用javascript(即渐进式增强),信息都是可用的。这也减少了不断移动鼠标所需的服务器调用次数。

请确保将另一个事件(而不仅仅是鼠标悬停)与效果联系起来,因为平板电脑,ipad, iPhone和其他设备没有悬停功能。

听起来你想要的一切都可以(也许应该)完全用jQuery/javascript完成。如果你是jQuery新手,他们的文档很棒。

相关内容

  • 没有找到相关文章

最新更新