zoukankan      html  css  js  c++  java
  • [AWDwR4] chapter 11 Play time 2th: use blind_up effect

    chapter 11 Play time

    Play time 2:
        使用Script.aculo.us JavaScript库中的blind_up效果代替隐藏cart这个div的过程。
        上网搜了一下,jquery中有blind这个效果,所以就用jquery中的hide("blind"),而不使用Script.aculo.us JavaScript库
        app/views/carts/destroy.js.erb这个文件可以有好几种写法,对照着可以加深理解:
        
        简单粗暴的方案A:      

     $('#cart').hide("blind", 1000);

        这个方案在删除Cart时可以正常隐藏cart这个div,但是后续操作会有问题,你能看出来吗?
        
        
        使用hide会把当前的cart隐藏,下次Add Cart时,客户端执行 app/views/line_items/create.js.erb 产生的js代码时,由于不满足$('#cart tr').length == 1这个条件,所以 {$('#cart').show('blind', 1000);} 这句不会执行。

        修改后的方案B: 

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

        由于在调用app/views/carts/destroy.js.erb这个模板时,cart中的line_items已经被清空了,所以render(@cart)后,cart这个div中只剩了total_line这个tr,下次Add Cart时,就不会出问题了。此时再调用 hide("blind")在垂直方向(默认)上隐藏cart这个div。
             
        官网的提示是使用jquery的not来选择除了 .total_line 的所有tr,并删除之,这样就不用 render @cart 了。下次Add To cart时,就可以正常显示cart这个div了。
            C,不需要render @cart的方案:       

    $('#cart tr').not(".total_line").remove();  
    $('#cart').hide("blind", 1000);  

     回到本系列的目录       

  • 相关阅读:
    spring自定义标签
    shell脚本实战
    redis使用场景
    了解并安装Nginx
    查看jar包依赖树
    从一道索引数据结构面试题看B树、B+树
    11条sql技巧
    or/in/union与索引优化
    动态规划
    实现快速迭代的引擎设计
  • 原文地址:https://www.cnblogs.com/Jack47/p/2772383.html
Copyright © 2011-2022 走看看