溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前段時間了解到購物車結算算是一個難點部分，在網上也找了一些，但是網上除了插件之外，就是一些半成品，比如一部分只有添加刪除效果，另一部分只有結算功能，很少見到整合在一起的購物車效果，因此自己寫了一個，方便大家查看
（添加效果沒有飛入，實在懶得寫動畫效果了，湊合看吧）
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="css/index.css" rel="external nofollow" >
<script src="https://cache.yisu.com/upload/information/20200622/114/76503.html"/><span class="things_name">2014年春季爆品A<p>$<i>10</i><span class="buy">點擊購買</p></li>
<li num="2"><img src="images/2.jpg"/><span class="things_name">2014年春季爆品B<p>$<i>20</i><span class="buy">點擊購買</p></li>
<li num="3"><img src="images/3.jpg"/><span class="things_name">2014年春季爆品C<p>$<i>30</i><span class="buy">點擊購買</p></li>
<li num="4"><img src="images/4.jpg"/><span class="things_name">2014年春季爆品D<p>$<i>40</i><span class="buy">點擊購買</p></li>
</ul>
</div>
<div id="carlist">
<div class="car">
<div>
<span class="carLogo"><span><img src="images/car.png"/>
<span class="txt">購<br />物<br />車
</div>
</div>
<div class="list">
<!--此處添加動態元素-->
<div class="total">
<span>總價：<span>0元
</div>
</div>
</div>
<script type="text/javascript">
function view(){
return{
w:document.documentElement.clientWidth,
h:document.documentElement.clientHeight
};
}
document.body.style.height=view().h+"px";
</script>
</body>
</html>
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('<div class="select things" num='+kNum+'><img src='+thingsImage+'/><p class="name">'+thingsName+'</p><p class="price">$<i>'+thingsPrice+'</i></p><ul class="caozuo"><li class="zengjian"><span class="minus">-<span>1<span class="add">+</li><li class="del">刪除</li></ul></div>');
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<listThings.length;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")
}
}
}
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
