前段時(shí)間了解到購物車結(jié)算算是一個(gè)難點(diǎn)部分，在網(wǎng)上也找了一些，但是網(wǎng)上除了插件之外，就是一些半成品，比如一部分只有添加刪除效果，另一部分只有結(jié)算功能，很少見到整合在一起的購物車效果，因此自己寫了一個(gè)，方便大家查看
（添加效果沒有飛入，實(shí)在懶得寫動(dòng)畫效果了，湊合看吧）
網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了五指山免費(fèi)建站歡迎大家使用！
HTML部分
重慶分公司
重慶分公司
$10點(diǎn)擊購買
2014年春季爆品B$20點(diǎn)擊購買
2014年春季爆品C$30點(diǎn)擊購買
2014年春季爆品D$40點(diǎn)擊購買
購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
}
})
//點(diǎn)擊購買按鈕添加至購物車
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("已經(jīng)添加至購物車");
$(".list").append('
'+thingsName+'
$'+thingsPrice+'
- -1+
- 刪除
');
countTotalPrice();
totalGeshu();
//點(diǎn)擊加號(hào)添加商品個(gè)數(shù)
$(".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();
})
//動(dòng)態(tài)生成的元素點(diǎn)擊減號(hào)減少商品個(gè)數(shù)
$(".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();
})
//刪除購物車內(nèi)的商品
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("點(diǎn)擊購買")
})
})
//計(jì)算總價(jià)函數(shù)
function countTotalPrice(){
var totalPrice=0,listThings=$(".list").find(".things");
for (var i=0;i0) {
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")
}
}
}
}) 以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
