代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/shoppingcart.css" />
<script src="./js/jquery-3.1.1.min.js" ></script>
</head>
<body>
<div class="body">
<div class="shop"><i></i><span>我的购物车</span></div>
<div class="product">
<div class="product-box">
<div class="product-ckb"><em class="product-em product-xz"></em></div>
<div class="product-sx">
<a href="###">
<img src="img/cart_img/a3.png" class="product-img" />
<span class="product-name">酷冷至尊(Cooler Master)T610P CPU风冷散热器</span>
</a>
<span class="product-price">¥ <span class="price">299</span></span>
<div class="product-amount">
<div class="product_gw">
<em class="product-jian">-</em>
<input type="text" value="1" class="product-num" />
<em class="product-add">+</em>
</div>
</div>
<div class="product-del"><img src="./img/cart_img/deleteico.png" /></div>
</div>
</div>
<div class="product-box">
<div class="product-ckb"><em class="product-em"></em></div>
<div class="product-sx">
<a href="###">
<img src="img/cart_img/a1.png" class="product-img" />
<span class="product-name">游戏悍将 35英寸曲面电竞显示器21:9带鱼屏准4K游戏显示器</span>
</a>
<span class="product-price">¥ <span class="price">2099</span></span>
<div class="product-amount">
<div class="product_gw">
<em class="product-jian">-</em>
<input type="text" value="1" class="product-num" />
<em class="product-add">+</em>
</div>
</div>
<div class="product-del"><img src="img/cart_img/deleteico.png" /></div>
</div>
</div>
<div class="product-box">
<div class="product-ckb"><em class="product-em"></em></div>
<div class="product-sx">
<a href="###">
<img src="img/cart_img/a2.png" class="product-img" />
<span class="product-name">技嘉（GIGABYTE） 2080TURBO OC 8GC</span>
</a>
<span class="product-price">¥ <span class="price">1099</span></span>
<div class="product-amount">
<div class="product_gw">
<em class="product-jian">-</em>
<input type="text" value="1" class="product-num" />
<em class="product-add">+</em>
</div>
</div>
<div class="product-del"><img src="img/cart_img/deleteico.png" /></div>
</div>
</div>
<div class="product-box">
<div class="product-ckb"><em class="product-em"></em></div>
<div class="product-sx">
<a href="###">
<img src="img/cart_img/a4.png" class="product-img" />
<span class="product-name">AMD 锐龙 5 2600X 处理器 (R5) 6核12线程 AM4 </span>
</a>
<span class="product-price">¥ <span class="price">1299</span></span>
<div class="product-amount">
<div class="product_gw">
<em class="product-jian">-</em>
<input type="text" value="1" class="product-num" />
<em class="product-add">+</em>
</div>
</div>
<div class="product-del"><img src="img/cart_img/deleteico.png" /></div>
</div>
</div>
</div>
<div class="product-js">
<div class="product-al">
<div class="product-all">
<em class=""></em>
</div>
<div class="all-xz"><span class="product-all-qx">全选</span>
<div class="all-sl" style="display: none;">(<span class="product-all-sl">0</span>)</div>
</div>
</div>
<a href="#" class="product-sett product-sett-a">结算</a>
<div class="all-product"><span class="all-product-a">¥ <span class="all-price">296</span></span></div>
</div>
</div>
<!--购物车空-->
<div class="kon-cat">
<div class="catkon">
<div class="kon-box">
<div class="kon-hz">
<img src="img/cart_img/cart-air.png" />
<span class="kon-wz">购物车什么都没有</span>
<a href="###" class="kon-lj">去逛逛</a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {//179000535 唐茂源
if ($("em").hasClass("product-xz")) {
$(".product-sett").removeClass("product-sett-a")
} else {
$(".product-sett").addClass("product-sett-a")
}
$("body").click(function() {
if ($("em").hasClass("product-xz")) {
$(".product-sett").removeClass("product-sett-a")
} else {
$(".product-sett").addClass("product-sett-a")
}
})
$(".product-del").click(function() {//移除商品
if (window.confirm('确定要删除该项吗?')) {
$(this).parent().parent().remove();
}
if ($(".product").children().length == 0) {
$(".kon-cat").css("display", "block")
}
total();
});
$(".product-add").click(function() {//增加商品
$(this).prev().val(parseInt($(this).prev().val()) + 1);
total();
});
$(".product-jian").click(function() {//减少商品
//console.log($(this).next().val())
if (parseInt($(this).next().val()) > 1) {
$(this).next().val(parseInt($(this).next().val()) - 1)
} else {
if (window.confirm("商品数量不能小于1，请问是否删除")) {
$(this).parent().parent().parent().parent().remove();
}
}
total();
});
$(".product-em").click(function() {//选择商品
console.log($(this))
//$("this").toggleClass("product-xz");
if ($(this).hasClass("product-xz")) {
$(this).removeClass("product-xz")
} else {
$(this).addClass("product-xz");
}
console.log($(".product-em.product-xz").length)
if ($(".product-em.product-xz").length == $(".product-em").length) {
$(".product-all").find("em").addClass("product-all-on")
} else {
$(".product-all").find("em").removeClass("product-all-on")
}
total();
});
$(".product-all").click(function() {//全选商品
if ($(this).find("em").hasClass("product-all-on")) {
$(this).find("em").removeClass("product-all-on");
$(".product-em").removeClass("product-xz");
} else {
$(this).find("em").addClass("product-all-on");
$(".product-em").addClass("product-xz");
}
total();
})
function total() {//总共价钱
let checkboxs = $(".product-em");
let priceSpans = $(".price");
let countInput = $(".product-num");
let totalPrice = 0;
for (let i = 0; i < priceSpans.length; i++) {
if ($(checkboxs[i]).hasClass("product-xz")) {
let price = parseFloat($(priceSpans[i]).text());
//console.log(price);
let count = parseInt($(countInput[i]).val());
//console.log(count);
totalPrice += price * count;
}
}
$(".all-price").html(totalPrice);
}
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手