jquery購物車php,JQuery實作購物車添加删除以及結算功能

本文主要介紹了基于JQuery的購物車添加删除以及結算功能示例，具有一定的參考價值，感興趣的小夥伴們可以參考一下，希望能幫助到大家。

前段時間了解到購物車結算算是一個難點部分，在網上也找了一些，但是網上除了插件之外，就是一些半成品，比如一部分隻有添加删除效果，另一部分隻有結算功能，很少見到整合在一起的購物車效果，是以自己寫了一個，友善大家檢視

(添加效果沒有飛入，實在懶得寫動畫效果了，湊合看吧)

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(){

var mark=0;

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

if(mark==0){

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

mark=1;

}else{

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

mark=0

}

})

//點選購買按鈕添加至購物車

var buyButton=$(".buy");

buyButton.on("click",BuyClick)

function BuyClick(){

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

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

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

var kNum=$(this).parents("li").attr("num")

var Geshu=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();

})

//删除購物車内的商品

var del=$(".del");

del.each(function(){

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

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

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

countTotalPrice();

totalGeshu();

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

oldBtn.on("click",BuyClick).text("點選購買")

})

})

//計算總價函數

function countTotalPrice(){

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

for (var i=0;i

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

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

totalPrice+=this_geshu*this_price;

}

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

totalGeshu();

}

//購物車上的商品總數

function totalGeshu(){

var listThings=$(".list").find(".things");

if (listThings.length>0) {

var totalGeshu=0;

listThings.each(function(){

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

totalGeshu+=this_geshu;

})

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

} else{

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

}

}

}

})

相關推薦：