jquery选择器_基于JQuery的购物车添加删除以及结算功能示例

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

HTML部分

 

 代码如下

   

   

   

   

   <scriptsrc="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"type="text/javascript"charset="utf-8"></script>

   <scriptsrc="js/index.js"type="text/javascript"charset="utf-8"async defer></script>

   

   

    

      2014年春季爆品A

$10点击购买

      2014年春季爆品B

$20点击购买

      2014年春季爆品C

$30点击购买

      2014年春季爆品D

$40点击购买

    

   

     

   

    

      

        

        购
物
车

      

        

    

    

      

      

        总价：0元

      

    

   

   <scripttype="text/javascript">

    function view(){

          return{

            w:document.documentElement.clientWidth,

            h:document.documentElement.clientHeight

          };

        }

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

   </script>

 

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")

       }

     }

   }

  })

   

  jquery选择器_基于JQuery的购物车添加删除以及结算功能示例

  http://m.bbyears.com/wangyezhizuo/129364.html

  推荐访问:jquery面试题 jquery教程