基于JQuery的购物车添加删除以及结算功能示例

作者：袖梨 2022-06-25

前段时间了解到购物车结算算是一个难点部分，在网上也找了一些，但是网上除了插件之外，就是一些半成品，比如一部分只有添加删除效果，另一部分只有结算功能，很少见到整合在一起的购物车效果，因此自己写了一个，方便大家查看
（添加效果没有飞入，实在懒得写动画效果了，凑合看吧）

HTML部分

 

 代码如下 复制代码

   

   

   

   

   

   

   

   

    

          2014年春季爆品A

    $10点击购买

          2014年春季爆品B

    $20点击购买

          2014年春季爆品C

    $30点击购买

          2014年春季爆品D

    $40点击购买

        

   

     

   

    

      

        

        购
物
车

      

        

    

    

      

      

        总价：0元

      

    

   

   

    function view(){

          return{

            w:document.documentElement.clientWidth,

            h:document.documentElement.clientHeight

          };

        }

        document.body.style.height=view().h+"px";

   

 

JS部分

 

 代码如下 复制代码

$(function(){

 varmark=0;

 $(".car").on("click",function(){

   if(mark==0){

     $("#carlist").animate({marginRight:"0px"},500)

     mark=1;

   }else{

     $("#carlist").animate({marginRight:"-260px"},500)

     mark=0

   }

 })

  

  

 //点击购买按钮添加至购物车

 varbuyButton=$(".buy");

 buyButton.on("click",BuyClick)

 

 functionBuyClick(){

   varthingsName=$(this).parents("li").find(".things_name").text();

   varthingsPrice=$(this).parent().find("i").text();

   varthingsImage=$(this).parents("li").find("img").attr("src");

   varkNum=$(this).parents("li").attr("num")

   varGeshu=1;

   $(this).off("click").text("已经添加至购物车");

        

   $(".list").append('

'+thingsName+'

$'+thingsPrice+'

  • -1+
  • 删除
');

   countTotalPrice();

   totalGeshu();

     

   //点击加号添加商品个数

     

   $(".add").off("click").on("click",function(){

     Geshu=parseInt($(this).parent().find("span:nth-of-type(2)").text())

     Geshu++

     $(this).parent().find("span:nth-of-type(2)").text(Geshu)

     countTotalPrice();

     totalGeshu();

   })

     

   //动态生成的元素点击减号减少商品个数

   $(".minus").off("click").on("click",function(){

     Geshu=parseInt($(this).parent().find("span:nth-of-type(2)").text());

     if(Geshu>1){

       Geshu--;

       $(this).parent().find("span:nth-of-type(2)").text(Geshu)

     }else{

       Geshu==1;

     }

     countTotalPrice();

     totalGeshu();

   })

     

   //删除购物车内的商品

   vardel=$(".del");

   del.each(function(){

     $(this).off("click").on("click",function(){

       vardelName=$(this).parents(".things").find(".name").text();

       $(this).parents(".things").remove();

       countTotalPrice();

       totalGeshu();

       varoldBtn=$("#container ul li").find("span:contains("+delName+")").parents("li").find(".buy")

       oldBtn.on("click",BuyClick).text("点击购买")

     })

   })

  

   //计算总价函数

   functioncountTotalPrice(){      

     vartotalPrice=0,listThings=$(".list").find(".things");

     for(vari=0;i

       varthis_geshu=parseInt(listThings.eq(i).find(".zengjian span:nth-of-type(2)").text());

       varthis_price=parseInt(listThings.eq(i).find(".price i").text());

       totalPrice+=this_geshu*this_price;

     }

     $(".total span").eq(1).text(totalPrice);

     totalGeshu();

   }

     

   //购物车上的商品总数

   functiontotalGeshu(){

     varlistThings=$(".list").find(".things");

     if(listThings.length>0) {

       vartotalGeshu=0;

       listThings.each(function(){

         varthis_geshu=parseInt($(this).find(".zengjian span:nth-of-type(2)").text());

         totalGeshu+=this_geshu;

       })

       $(".carLogo span").html(totalGeshu)

     }else{

       $(".carLogo span").css("display","none")

     }

   }

 }

})

 

相关文章

精彩推荐