大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

jquery实现购物车数量加减,价格计算功能

HTML代码:

网站建设哪家好,找成都创新互联公司!专注于网页设计、网站建设、微信开发、成都小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了婺城免费建站欢迎大家使用!




    
    
    
    
    A03号桌
    


    
     
    
        
            
                
                
                    菜品名称
                    数量
                    单价
                    价格
                
                
                
                
                    大闸蟹
                    
                        +
                        1
                        -
                    
                    
                        ¥68.00
                    
                    
                        ¥68.00
                    
                
                
                    在天愿作比翼鸟
                    
                        +
                        1
                        -
                    
                    
                        ¥68.00
                    
                    
                        ¥68.00
                    
                
                
                    红嘴绿鹦哥
                    
                        +
                        1
                        -
                    
                    
                        ¥68.00
                    
                    
                        ¥68.00
                    
                
                
            
        
                     
  •                                  合计:242.00                              
  •             
  •                 保存             
  •              

    JS代码:

    /****点击增加按钮****/
    $('.add').click(function(){
        //修改数量
        var n=$(this).next().html();
        var num=parseInt(n)+1;
        $(this).next().html(num);
        //计算价格
        var c= $(this).parent().siblings().children('.price').html();
        parseInt(c);
        var subPrice = num * c;
        var sub_price = subPrice.toFixed(2); //保留小数点后面两位小数
        $(this).parent().siblings().children('.sub_total').html(sub_price);
    
        //计算总价
        var total=0;
        $('.sub_total').each(function(){
            var price=parseInt($(this).html());
            total+=price;
            var total_price = total.toFixed(2);
            $('.total b').html(total_price);
        });
    });
    
    
    /****点击减少按钮****/
    $('.reduce').click(function(){
        //修改数量
        var n=$(this).prev().html();
        var num=parseInt(n)-1;
        if(num==0){return;}//数量减到0就能再减了
        $(this).prev().html(num);
    
        //计算价格
        var c= $(this).parent().siblings().children('.price').html();
        parseInt(c);
        var subPrice = num * c;
        subPrice.toFixed(2);
        var sub_price = subPrice.toFixed(2);
        $(this).parent().siblings().children('.sub_total').html(sub_price);
    
        //计算总价
        var total=0;
        $('.sub_total').each(function(){
            var price=parseInt($(this).html());
            total+=price;
            var total_price = total.toFixed(2);
            $('.total b').html(total_price);
        });
    });

    考虑到篇幅问题,没有贴出CSS代码,最终页面截图如下:

    jquery实现购物车数量加减,价格计算功能


    网站题目:jquery实现购物车数量加减,价格计算功能
    本文链接:http://dzwzjz.com/article/gjhdhs.html

    其他资讯

    在线咨询
    服务热线
    服务热线:028-86922220
    TOP