[AWDwR4] Iteration F4

最新推荐文章于 2025-08-13 21:05:35 发布

转载最新推荐文章于 2025-08-13 21:05:35 发布 · 69 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Jack47/archive/2012/11/06/2757682.html

文章标签：

#javascript #ViewUI

本文介绍如何使用jQuery实现购物车的渐变显示效果。当购物车为空时，通过客户端JavaScript判断并在点击添加到购物车按钮后使购物车渐变显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　直接参照链接 section-11.4 来做
　　在app/views/line_items/create.js.erb 中使用jQuery语句来产生渐变显示。

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

   可以使用JavaScript lint 在线检查JavaScript的语法对不对。
   注意此时的语法是jQuery的语法，而书上的create.js.rjs是在服务器端进行处理之后才生成JavaScript语句的，所以可以使用成员变量 @cart.total_items。而我们使用jQuery而不是Prototype/Rjs时，只能利用客户端的Javascript语句来判断是否需要渐变显示。当 id为cart的tag中tr只有一个时，@cart.line_items.empty？==true的时候，这个时候cart里面只有一个tr，用来显示总价的。
    在 app/views/layouts/application.html.erb中

 <%= hidden_div_if(@cart.line_items.empty?, id: 'cart') do %>    
         <%= render @cart %>
 <% end %>

hidden_div_if 是定义在app/helpers/application_helper.rb中的函数，它产生一个id为cart的div，如果@cart.line_items.empty成立，这个div的display属性为none，即不显示这个div。这样整体效果是当@cart.line_items.empty时，cart是隐藏了的，此时单击Add to cart，客户端收到服务器端的javascript代码（create.js.erb ），由于满足$('#cart tr').length == 1,所以cart会进行渐变显示，同时会执行$('#cart').html('<%= escape_javascript(render(@cart)) %>');来更新cart。

回到本系列的目录

转载于:https://www.cnblogs.com/Jack47/archive/2012/11/06/2757682.html