购物车的效果

    var rating=(function(){  
        // 点亮  
            var init=function(el,num){  
                var $rating =$(el),  
                    $item=$rating.find('.rating-item');  
                var lightOn=function($item,num){  
                    $item.each(function(index){  
                    if(index<num){  
                    $(this).css('background-image','url(img/star2.png)');  
                    }else{  
                    $(this).css('background-image','url(img/star1.png)');  
                    }  
                });  
            };  
                            // 初始化  
                lightOn($item,num);  
                // 事件绑定  
                // $rating.on('mouseover','.rating-item',function() {  
                //     lightOn($item,$(this).index()+1); //加一是因为上面是小于  
                // }).on('click','.rating-item',function(){  
                //     num=$(this).index()+1; //直接改变num值  
                // }).on('mouseout',function(){  //离开时显示  
                //     lightOn($item,num);  
                // });       
            };  
            // jq封装  
            $.fn.extend({  
                rating:function(num){  
                    return this.each(function(){  
                        init(this,num);  
                    });  
                }  
            })  
            return {  
                init:init  
            };  
  
    })();  
    $('#rating').rating(3);  
    $('.rating').rating(3); 
// 点星星

// 购物车
        $('body').on('click','.addcar',function(){
        $('.tobuy-list').show(100);　
        var tds=$(this).parent();//获取当前元素的父节点的全部兄弟节点
        var name=$(tds).find('.modity-name').text();//获取商品名称
        var price=$(tds).find('.modity-price').text();//获取商品价格
        var pnum = 1;
        var flag = false;  //确定状态
        $('.shaxian').each(function(){
            if($(this).find('.buy-name').text() == name){
                pnum = $(this).find('input').val() ; 
                $(this).find('input').val(parseInt(pnum)+1);
                flag = true;   //为true时，不执行下列函数
                return false;
            }
        });

        if(!flag){         //确定状态的
            var html = $(
            "<div class='shaxian'>"+   
            "<p class='buy-name'>"+name+"</p>"
            +"<div class='numgg'>"+
            "<span class='plus'>+</span>"+
            "<input type='text' value='"+ pnum +"' readOnly='true' >"+
            "<span class='minus'>-</span>"+
            "</div>"+
            "<p class='buy-price'>"+price+"</p>"+
            "</div>"
            );
            $(".top-buy-list").append(html);
        }

        // 总个数 +1
        var totalNum = parseInt($(".totalNum").text());
        $(".totalNum").text(totalNum + 1);
        //计算总价
        $(".totalPrice").text(toDecimal2(parseFloat($(".totalPrice").text())+parseFloat(price)));  
        $("#msg").show().animate({width: '250px'}, 200).fadeOut(1000);

           
        
        });
// 购物车
     
// 飞入
$(function() {
    var offset = $("#end").offset();
    $(".addcar").click(function(event){
        var addcar = $(this);
        var img = addcar.parent().find('img').attr('src');
        var flyer = $('<img class="u-flyer" src="'+img+'">');
        flyer.fly({
            start: {
                left: event.pageX,
                top: event.pageY
            },
            end: {
                left: offset.left+10,
                top: offset.top+10,
                width: 0,
                height: 0
            },
            // onEnd: function(){
            //     $("#msg").show().animate({width: '250px'}, 200).fadeOut(1000);
            //     addcar.css("cursor","default").removeClass('orange').unbind('click');
            //     this.destory();
            // }
        });
    });
});
    // 飞入

        // +与-控制总数与价格
$(document).ready(function(){
        //点击增加按钮触发事件
        $('body').on('click','.plus',function(){
        var num = $(this).parent().children("input");
        //单品数量增加
        num.val(parseInt(num.val())+1);
        //商品总数增加
        var totalNum = parseInt($(".totalNum").text());
        totalNum++
        $(".totalNum").text(totalNum);
        //计算总价
        var goods_price = parseFloat($(this).parent().parent().children(".buy-price").text());
        $(".totalPrice").text(toDecimal2(parseFloat($(".totalPrice").text())+goods_price));
    });

        // 点击增加按钮触发事件减小  
         $('body').on('click','.minus',function(){
        var num = $(this).parent().children("input");
        if(parseInt(num.val())>1){
        num.val(parseInt(num.val())-1);
        var totalNum = parseInt($(".totalNum").text());
        totalNum--
        $(".totalNum").text(totalNum);
        var goods_price = parseFloat($(this).parent().parent().children(".buy-price").text());
        $(".totalPrice").text(toDecimal2(parseFloat($(".totalPrice").text())-goods_price));
    } else{
        var totalNum = parseInt($(".totalNum").text());
        totalNum--
        $(".totalNum").text(totalNum);
        var goods_price = parseFloat($(this).parent().parent().children(".buy-price").text());
        $(".totalPrice").text(toDecimal2(parseFloat($(".totalPrice").text())-goods_price));
        $(this).parent().parent().find('.buy-name').text()==0;
        num.val("0");
        console.log(11);
        $(this).parent().parent().remove();
    }
    });
    });




        
        // 显示与隐藏
        $(function(){
            $('.m-sidebar').find('.cart').click(function(){
            $('.tobuy-list').toggle(100);
        });
        });
        // 将input设定为不可更改
        $(function(){
            $('numgg').children('input').attr("disabled","disabled");
        });
                //点击清空
        $(function(){
        $('.emptyno').click(function(){
            $('.shaxian').remove();
            $('.totalNum').text(0);
            $('.totalPrice').text(0);
        });
        });


    // 如果不足两位补足两位
    function toDecimal2(x) { 
      var f = parseFloat(x); 
      if (isNaN(f)) { 
        return false; 
      } 
      var f = Math.round(x*100)/100; 
      var s = f.toString(); 
      var rs = s.indexOf('.'); 
      if (rs < 0) { 
        rs = s.length; 
        s += '.'; 
      } 
      while (s.length <= rs + 2) { 
        s += '0'; 
      } 
      return s; 
    } 



      

首先问题是 用jq动态添加的div需要使用on来动态绑定，而不能使用简单的click。当你点击加入购物车时。应该自动将文字与价格填入购物车中。。价格计算哟啊注意val与text的区别。。要使用两位小数来获取。。还有if状态确定。当 已有这个时只需要点击一下即可。购物车交互是真的麻烦。。网上也没有人分享。。