首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Rails3:鼠标悬停时更改表列的内容

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

Stack Overflow用户
提问于 2011-04-29 05:17:21
回答 1查看 382关注 0票数 1

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

代码语言:javascript
运行
复制
        <% 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 entry.amount,并在鼠标再次离开时更改回原始值。此外,我还想添加另一种样式,可以是class="over“,也可以直接设置元素的颜色。

如果有任何关于如何在Rails3中最好地实现这一点的建议(以及如果只需要在一个视图中放置代码的位置),我将不胜感激。

(备注: my_number_to_currency是一个简单的帮助器,只需考虑普通的number_to_currency,我添加了JQuery-tag,因为我已经将其用于自动完成,因此如果对解决方案有帮助,它是可用的)

更新

我在application.js中尝试了以下内容,并取得了成功:

代码语言:javascript
运行
复制
$(document).ready(function() {
    $(".joint").hover(
        function() { $(this).children(".full").show(); $(this).children(".half").hide(); },
        function() { $(this).children(".half").show(); $(this).children(".full").hide(); }
    );
});
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-04-29 05:29:05

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

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

由于平板电脑、iPads、iPhone和其他设备没有悬停功能,因此一定要将另一个事件(而不仅仅是鼠标悬停)与效果关联起来。

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5825145

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档