代码片段
$(".store-checkbox").each((i, storeCheckboxE) => {
if (storeCheckboxE.checked != target.checked) {
$(storeCheckboxE).trigger("click");
}
});
[".subtract", ".add"].forEach((selector) => {
if ($inputE.val() == limit) {
numE.querySelector(selector).classList.add("disabled");
} else {
var subtractE = numE.querySelector(selector);
if (subtractE.className.indexOf("disabled") != -1) {
subtractE.classList.remove("disabled");
}
}
limit = "99999999";
});
$(".commodity-delete").on("click", function ({
target
}) {
$commodity = $(target).parents(".commodity");
if ($commodity.siblings(".commodity").length != 0) {
$commodity.remove();
} else {
$commodity.parens(".store").remove();
}
});
var itemAmt = commodityE.querySelector(".commodity-amt").textContent;
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>购物车</title>
<link rel="stylesheet" href="../css/bootstrap.css" />
<script src="../js/jquery-3.6.0.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<style>
.img {
height: 80px;
width: 80px;
}
.img img {
width: 100%;
height: 100%;
}
.num {
height: 38px;
}
.num button {
border: 1px solid #e2e6ea;
}
.btn.disabled {
color: #e2e6ea;
background: #81868a2e;
cursor: not-allowed;
border: 1px solid #bdc4cb;
}
</style>
<body>
<div class="jumbotron text-center">
<h1>购物车</h1>
</div>
<div class="container">
<div class="top row">
<div class="col-2">车内商品(<span class="cart-commodity-num">5</span>)</div>
<div class="col-4 offset-6">
总价(不含运费):¥<span class="amount">0.00</span>
<button class="btn btn-primary">结算</button>
</div>
</div>
<div class="cart-head row">
<div class="col-6">
<div class="custom-control custom-checkbox constom-control-inline">
<input type="checkbox" name="checkAll" id="checkAll" class="custom-control-input checkAll" />
<label for="checkAll" class="custom-control-label">全选</label>
</div>
</div>
<div class="col-1">单价</div>
<div class="col-1">数量</div>
<div class="col-2">金额</div>
<div class="col-1">操作</div>
</div>
<div class="store">
<div class="row">
<div class="col-6">
<div class="custom-control custom-checkbox constom-control-inline">
<input type="checkbox" id="store-1" class="store-checkbox custom-control-input" />
<label for="store-1" class="store-name custom-control-label">店铺:小约翰杰克店
</label>
</div>
</div>
</div>
<div class="row bg-light m-3 commodity">
<div class="col-6 row m-0">
<div class="col-1">
<div class="custom-control custom-checkbox constom-control-inline">
<input type="checkbox" id="commodity-1" class="custom-control-input commodity-checkbox" />
<label for="commodity-1" class="custom-control-label cursor">
</label>
</div>
</div>
<div class="col-4">
<div class="img">
<img src="./img/shampoo-god.png" alt="" />
</div>
</div>
<div class="col-7">
【国庆价】God男士古龙洗发水控油去屑持久留香正品官方品牌旗舰产品
</div>
</div>
<div class="col-1 price">322.00</div>
<div class="col-2 input-group num">
<div class="input-group-prepend">
<button class="btn btn-light subtract disabled">-</button>
</div>
<input type="text" class="form-control num-input text-center" value="1" />
<div class="input-group-append">
<button class="btn btn-light add">+</button>
</div>
</div>
<div class="col-2 commodity-amt">322.00</div>
<div class="col-1 commodity-delete">删除</div>
</div>
<div class="row bg-light m-3 commodity">
<div class="col-6 row m-0">
<div class="col-1">
<div class="custom-control custom-checkbox constom-control-inline">
<input type="checkbox" id="commodity-1" class="custom-control-input commodity-checkbox" />
<label for="commodity-1" class="custom-control-label cursor">
</label>
</div>
</div>
<div class="col-4">
<div class="img">
<img src="./img/shampoo-god.png" alt="" />
</div>
</div>
<div class="col-7">
【国庆价】God男士古龙洗发水控油去屑持久留香正品官方品牌旗舰产品
</div>
</div>
<div class="col-1 price">322.00</div>
<div class="col-2 input-group num">
<div class="input-group-prepend">
<button class="btn btn-light subtract disabled">-</button>
</div>
<input type="text" class="form-control num-input text-center" value="1" />
<div class="input-group-append">
<button class="btn btn-light add">+</button>
</div>
</div>
<div class="col-2 commodity-amt">322.00</div>
<div class="col-1 commodity-delete">删除</div>
</div>
</div>
<div class="cart-footer row">
<div class="col-6">
<div class="custom-control custom-checkbox constom-control-inline">
<input type="checkbox" id="checkAll-footer" class="custom-control-input checkAll" />
<label for="checkAll-footer" class="custom-control-label">全选</label>
</div>
</div>
<div class="col-2">
已选商品<span class="commodity-selected-num"></span>件
</div>
<div class="col-4">
总价(不含运费):¥<span class="amount">0.00</span>
<button class="btn btn-primary">结算</button>
</div>
</div>
</div>
</body>
<script>
loadData();
function getData() {
var store = {
name: "小约翰杰克",
commoditys: [{
id: "0",
img: "./img/shampoo-god.png",
discribe: "【国庆价】God男士古龙洗发水控油去屑持久留香正品官方品牌旗舰产品",
price: "32.00",
num: "1",
}, ],
};
var data = [];
for (let i = 0; i < 3; i++) {
store = JSON.parse(JSON.stringify(store));
var commoditys = [];
for (let i = 0; i < 3; i++) {
let commodity = JSON.parse(JSON.stringify(store.commoditys[0]));
commodity.id = Math.random()
commoditys.push(commodity);
}
store.commoditys = commoditys;
data.push(store);
}
return data;
}
function loadData() {
var num = 0;
var data = getData();
$storeTE = $(".store");
$commodityTE = $storeTE.find('.commodity');
$storeTE.find('.commodity').remove();
$(".store").remove();
var html = "";
data.forEach((store, i) => {
$storeE = $storeTE.clone();
$storeE.find(".store-name").text(store.name + (i + 1));
var storeId = 'store-' + i;
$storeE.find('.store-checkbox').attr({
id: storeId
})
$storeE.find('.store-checkbox').siblings('label').attr({
for: storeId
})
store.commoditys.forEach((commodity, i) => {
num++;
$commodityE = $commodityTE.clone();
$commodityE.find('.commodity-checkbox').attr({
id: commodity.id
})
$commodityE.find('.commodity-checkbox').siblings('label').attr({
for: commodity.id
});
$commodityE.find('img').attr('src', commodity.img);
$commodityE.find('.num input').text(commodity.num);
$commodityE.find('.discribe').text(commodity.discribe);
$commodityE.find('.price').text(commodity.price);
$commodityE.find('.commodity-amt').text((parseFloat(commodity.price) *
parseFloat(commodity.num)).toFixed(2));
$storeE.append($commodityE.get(0).outerHTML);
})
$(".cart-footer").before($storeE.clone());
$(".cart-commodity-num").text(num);
});
}
$(".commodity-checkbox").each(function (i, e) {
$(e).on("click", function () {
doFlush();
});
});
$(".store-checkbox").each(function (i, e) {
$(e).on("click", () => {
$(e)
.parents(".store")
.find(".commodity-checkbox")
.each(function (i, checkboxE) {
if (e.checked != checkboxE.checked) {
$(checkboxE).trigger("click");
}
});
});
});
$(".checkAll").click(({
target
}) => {
$('.checkAll').each((i,e)=>{
if(e.checked != target.checked){
e.checked = target.checked
}
})
$(".store-checkbox").each((i, storeCheckboxE) => {
if (storeCheckboxE.checked != target.checked) {
$(storeCheckboxE).trigger("click");
}
});
});
$(".num").each(function (i, numE) {
var $inputE = $(numE).find(".num-input");
var price = $(numE).parents(".commodity").find(".price").text();
$inputE.change((e) => {
var value = e.target.value;
value = value.replace(/^[0]/, "");
value = value.replace(/[^\d]/g, "");
if (value < 1 || !value) {
value = 1;
}
value = value > 99999999 ? 99999999 : value;
result = value * parseFloat(price);
$inputE.parents(".commodity").find(".commodity-amt").text(result.toFixed(2));
$inputE.val(value);
doFlush();
var limit = "1";
[".subtract", ".add"].forEach((selector) => {
if ($inputE.val() == limit) {
numE.querySelector(selector).classList.add("disabled");
} else {
var subtractE = numE.querySelector(selector);
if (subtractE.className.indexOf("disabled") != -1) {
subtractE.classList.remove("disabled");
}
}
limit = "99999999";
});
});
numE.onclick = ({
target
}) => {
num = target.textContent == "+" ? 1 : -1;
$inputE.val(parseInt($inputE.val()) + num);
$inputE.trigger("change");
};
});
$(".commodity-delete").on("click", function ({
target
}) {
$commodity = $(target).parents(".commodity");
if ($commodity.siblings(".commodity").length != 0) {
$commodity.remove();
} else {
$commodity.parens(".store").remove();
}
});
function doFlush() {
var amt = 0;
var num = 0;
$(".commodity").each((i, commodityE) => {
var isChecked = commodityE.querySelector(".commodity-checkbox").checked;
if (isChecked) {
var itemAmt = commodityE.querySelector(".commodity-amt").textContent;
amt += parseFloat(itemAmt);
num++;
}
});
$(".amount").text(amt.toFixed(2));
$('.commodity-selected-num').text(num);
}
</script>
</html>