Ruby China

Rails 黄色渐变不生效。求解答。

diguage · 2013年05月02日 · 最后由 xwxy 回复于 2014年01月13日 · 2909 次阅读

还是看《Agile Web Development with Rails 4th》遇到的问题。

在发了帖子后“点击一下按钮，发送两次 Ajax 请求。求解释？” http://ruby-china.org/topics/10624，解决掉了两次请求的问题。

但是刚刚发现，点击“Add to Cart”后，变化的商品高亮显示了。针对高亮，还设置了黄色渐变，渐变成和背景色一样的相关。但是，实际运行的效果确实，渐变效果没有生效。我看了看页面中所有的 JavaScript 代码， 没有发现我自己写的那段代码。这是怎么回事？ 找到这段代码了，点击“Add to Cart”后， 在返回的响应主体里。但是， 为啥没有生效呢？

相关原代码如下： %depot%/app/views/line_items/create.js.erb

if ($('#cart tr').length == 1) {
    $('#cart').show('blind', 1000);
}

$('#cart').html("<%=j render @cart %>");

$('#current_item').css({'background-color':'#88ff88'})
   .animate({'background-color':'#114411'}, 1000);

点击“Add to Cart”后，返回的内容：

if ($('#cart tr').length == 1) {
    $('#cart').show('blind', 1000);
}

$('#cart').html("<div class=\"cart_title\">Your Cart<\/div>\n<table>\n    <tr id=\"current_item\">\n    <td>1&times;<\/td>\n    <td>Programming Ruby 1.9<\/td>\n    <td class=\"item_price\">$49.95<\/td>\n<\/tr>\n\n\n    <tr class=\"total_line\">\n     <td colspan=\"2\">Total<\/td>\n     <td class=\"total_cell\">$49.95<\/td>\n    <\/tr>\n<\/table>\n\n<form action=\"/carts/37\" class=\"button_to\" method=\"post\"><div><input name=\"_method\" type=\"hidden\" value=\"delete\" /><input data-confirm=\"Are you sure?\" type=\"submit\" value=\"Empty cart\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"CPMBK26mEqJh22ILD4S6zPC2QQy1IcjXnSqIROH8kQ0=\" /><\/div><\/form>\n");

$('#current_item').css({'background-color':'#88ff88'})
   .animate({'background-color':'#114411'}, 1000);

完整项目代码：https://github.com/diguage/depot

无引用文章
teddy #1 2013年05月02日

地瓜哥我来顶你了，这个项目我自己做的是 ok 的，返回内容如下

$("#notice").hide();

if ($('#cart tr').length == 1){ $('#cart').show('blind',  1000); }

$('#cart').html("<div class=\"cart_title\">Your Cart<\/div>\n<table>\n  <tr id=\"current_item\">\n  <td>1&times;<\/td>\n    <td>CoffeeScript<\/td>\n    <td class=\"item_price\">$36.00<\/td>\n<\/tr>\n\n\n <tr class=\"total_line\">\n     <td colspan=\"2\">Total<\/td>\n     <td class=\"total_cell\">$36.00<\/td>\n <\/tr>\n<\/table>\n\n<form action=\"/orders/new\" class=\"button_to\" method=\"get\"><div><input type=\"submit\" value=\"Checkout\" /><\/div><\/form>\n<form action=\"/carts/21\" class=\"button_to\" method=\"post\"><div><input name=\"_method\" type=\"hidden\" value=\"delete\" /><input data-confirm=\"Are you sure?\" type=\"submit\" value=\"Empty cart\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"tknhFwpXYViPZ0QSx6Cpl64CA1kS3mCvBqXrhkVsrZ4=\" /><\/div><\/form>\n");

$('#current_item').css({'background-color':'#88ff88'}).
animate({'background-color':'#114411'}, 1000);

你的项目我回家以后 fork 帮你看看

diguage #2 2013年05月02日

#1 楼 @Teddy 谢谢！ 从返回值来看，应该是正确的。但也没有发现什么错误。但是不知道为啥就是木有正确运行。

teddy #3 2013年05月02日

没加 jquery-ui，给你发了 pull request 了

diguage #4 2013年05月02日

#3 楼 @Teddy 我已经合并了。测试一下，确实可以了。谢谢！

我当初在 application.js 看到有 //= require jquery_ujs 以为它就是 //= require jquery_ui 然后就没有动这个文件。

无知害死人啊！哈哈

xwxy #5 2014年01月13日

.....require 了 jquery_ui, 也 require 了 jquery.ui.all, 但是 highlight 的那段代码还是不起效……注释掉就好了，于是就先注释掉了 T-T

需要 登录 后方可回复, 如果你还没有账号请 注册新账号