用jQuery模仿淘宝开发购物车的思路、遇到的技术问题、源代码--着重讲页面的设计

用jQuery模仿淘宝开发购物车的思路、遇到的技术问题、源代码--着重讲页面的设计。这几天在做学校的大创项目（开发一个购买桶装水系统），为了使项目给用户提供的页面更人性，在开发购物车这部分运用了jQuery框架框架。

从思考如何实现购物车功能到最终人性化地实现也经过了挺长的时间，所以现在我从整个思路分析开始，再加上在这个过程中遇到的问题，来分享一下我的心得： 首先，如果要使用户添加到购物车的数据不会因为下次登录或者在其他地方登录而变为空，就必须要把数据持久化（如何高效地持久化，这因项目而异，所以这里不展开讲）。

在设计购物车的页面时，我们应该想清楚购物车应该包含什么信息（自己想或者参考淘宝） 再次，我们应分析哪些功能需要实现，购物车的功能有可以设置购买的数量，计算价格，删除数据，结账..... 这里着重讲一下计算价格，为了符合现代的潮流，价格计算应该满足：①当我一选中某条商品，购物车的总价就立即更新；②当我更改数量离开该文本框后，就立即更新总价和该条数据的总价。 用Jquery框架可以开发出来满足上面两种条件的购物车，关于如何实现的价格计算可以到下面的地址下载源码，源码中配有详细的注释。 在这里和大家分享一下我在开发过程中遇到的两个主要的技术难点 一、像淘宝一样点击删除会弹出确认对话框

（实现这个功能需要运用jQuery框架中的动态动态加入子元素，不能提前就在jsp页面中加入删除超链接，要用动态加入的方法，才可以加入绑定事件，源码中的js文件中实现这个的代码如下：）

$(".delete").each(function() {
        /*
         * 为每一条数据动态添加删除超链接
         */
        $delA=$("");
        $delA.text("删除");
        $delA.attr("href","/waterPlatform/cart.do?cph=clearOneInfo&waterId="
                +$(this).parent().children().children().val());  //动态设计超链接的
        $delA.click(function() {
            return window.confirm("现在准备将"+$(this).parent().prevAll().eq(3).text()+"矿泉水从购物车中删除");
        })
        $(this).append($delA);
    })

  二、在操作复选框的时候，存在同步问题，即会遇到快速点击同一条数据的复选框时会出现总价格错乱的现象，例如如果快速点击复选框三次（选择，取消选择，选择）会出现同一条商品的价格在总价里面加两次的现象。造成这个问题是同步的问题，而JavaScript中并没有后台那样同步异步机制，下面是会出现问题的js代码：

    $("#quanxuan").click(function() {
        /*
         * 点击购物车全选的复选框触发的事件
         */
        $total=$(".total span");
        $nowTotal=parseFloat($total.text());
        if(this.checked){
             $(".item").each(function(){
                  $(this).attr("checked","checked");
                  $nowTotal=$nowTotal+parseFloat($(this).parent().nextAll().eq(3).text());
             })
             $total.text($nowTotal);
        }else{
            $(".item").each(function(){
                  $(this).attr("checked","");
                 // $nowTotal=$nowTotal+parseFloat($(this).parent().nextAll().eq(3).Text());
             })
             $total.text("0.0");
        }   
    })

之所以出现这个问题因为没有做到同步，即当我们第一次选中复选框时总价已经相加，当我们取消选中时，程序进入该函数，但当到if那里我们有选中了，所以this.checked==true再加一次，出现该问题是短时间内连续点击造成的，如果点击，等一定时间再点击是不会出现这种问题的，由于JavaScript中没有同步异步的机制，所以解决这个问题不能用后台的方法。一个可行的方法就是把里面的代码包装起来成为函数，就像源码中一样的就不会有问题。 源码地址：http://download.csdn.net/detail/c_p_h/9763370