这是我的shoppingcar.js文件：// 页面加载完成后执行a函数
window.onload = a;
// a函数，页面加载完成后执行的函数
function a() {
// 获取所有
全选复选框
var selectall = document.querySelectorAll(".selectAll");
// 获取所有单选复选框
var checkbox = document.querySelectorAll("[name=check]");
// 为每个
全选复选框添加点击事件监听器
selectall.forEach(sa => sa.onclick = e => {
// 遍历所有
全选复选框，将它们的状态设置为点击的复选框的状态
selectall.forEach(sa => sa.checked = e.target.checked);
// 遍历所有单选复选框，将它们的状态设置为点击的复选框的状态
checkbox.forEach(cb => cb.checked = e.target.checked);
// 调用total函数计算总价
total();
});
// 为每个单选复选框添加点击事件监听器
checkbox.forEach(cb => cb.onclick = checkAll);
// 获取所有数量输入框
var number = document.querySelectorAll("[type=number]");
// 为每个数量输入框添加改变事件监听器
number.forEach(nb => nb.onchange = e => {
// 获取价格和数量
var price = e.target.parentNode.parentNode.querySelector(".price").innerText;
var number = e.target.value;
// 计算小计并设置到页面上
e.target.parentNode.parentNode.querySelector(".subtotal").innerText = Number(price * number).toFixed(2);
// 调用total函数计算总价
total();
});
// 加载商品数据
load();
// 为每个删除按钮添加点击事件监听器
document.querySelectorAll(".del").forEach(de => {
de.onclick = () => {
// 获取父元素
var parent = de.parentNode.parentNode.parentNode;
// 获取父元素的父元素
var parent1 = de.parentNode.parentNode;
// 确认是否删除
if (confirm("确认删除")) {
//
移除父元素
parent.removeChild(parent1);
}
// 调用total函数计算总价
total();
};
});
// 为删除
选中商品按钮添加点击事件监听器
document.querySelector("#delcheck").onclick = () => {
// 获取
选中的商品数量
var a = confirm("删除
选中的商品");
// 遍历所有单选复选框
document.querySelectorAll("input[name=check]").forEach(de => {
// 如果复选框被
选中且确认删除，则
移除父元素
if (de.checked && a) {
var parent = de.parentNode.parentNode.parentNode;
var parent1 = de.parentNode.parentNode;
if (confirm("确认删除？")) {
parent.removeChild(parent1);
}
}
});
};
// 调用total函数计算总价
total();
}
// 检查所有复选框是否都被
选中
function checkAll() {
// 获取所有
全选复选框
var selectall = document.querySelectorAll(".selectAll");
// 获取所有单选复选框
var checkbox = document.querySelectorAll("[name=check]");
// 获取单选复选框的总数
var total = checkbox.length;
// 获取
选中的单选复选框的数量
var count = 0;
// 遍历单选复选框
checkbox.forEach(cb => {
// 如果复选框被
选中，计数器加1
if (cb.checked) count++;
});
// 如果所有单选复选框都被
选中，将
全选复选框也设置为
选中状态
if (count === total) {
selectall.forEach(sa => sa.checked = true);
} else {
// 否则
selectall.forEach(sa => sa.checked = false);
}
}
// 计算总价
function total() {
// 获取所有商品项
var items = document.querySelectorAll(".item");
// 初始化总价
var sum = 0;
// 遍历商品项
for (var item of items) {
// 如果单选复选框被
选中
if (item.querySelector("[name=check]").checked) {
// 累加小计到总价
sum += Number(item.querySelector(".subtotal").innerText);
}
}
// 设置总价到页面上
document.querySelector("#totalprice").innerText = sum.toFixed(2);
}
// 异步加载商品数据
function load() {
// 使用fetch API异步获取JSON数据
fetch("./js/products.json").then(resp => resp.json()).then(res => {
// 输出商品数据到控制台
console.log(res);
// 如果数据加载成功
if (res.status === "success") {
// 输出商品数据到控制台
console.log(res.data);
// 获取商品列表容器
const dom = document.querySelector(".productsBox");
// 初始化HTML字符串
let html = "";
// 遍历商品数据
for (const p of res.data) {
// 构建商品HTML并添加到容器
html += `<div class="product">
<img src="img/${p.img}" height="100">
<p>${p.name}</p>
<div>¥${p.price}</div>
<button>加入购物车</button>
</div>`;
}
// 将HTML设置为商品列表容器的innerHTML
dom.innerHTML = html;
// 获取所有按钮
const btns = dom.querySelectorAll("button");
// 为每个按钮添加点击事件监听器
btns.forEach((b, index) => {
b.onclick = () => {
// 添加商品到购物车
addToCart(res.data[index]);
};
});
}
}).catch(e => {
// 处理错误
console.error("加载失败，请重试");
});
}
// 添加商品到购物车
function addToCart(product) {
// 获取所有商品项
const items = document.querySelectorAll(".item");
// 遍历商品项
for (const item of items) {
// 如果商品名称与当前商品相同
if (item.querySelector("div:nth-child(3)").innerHTML.trim() === product.name) {
// 获取数量输入框
const number = item.querySelector("[type=number]");
// 增加数量
number.value = Number(number.value) + 1;
// 触发改变事件
number.dispatchEvent(new Event("change"));
// 返回，避免继续添加相同的商品
return;
}
}
// 构建新的商品HTML并添加到购物车列表
let html = `
<div class="item">
<div><input type="checkbox" name="check" /></div>
<div><img src="img/${product.img}" height="100" /></div>
<div>${product.name}</div>
<div>¥<span class="price">${product.price}</span></div>
<div><input type="number" value="1" min="1" /></div>
<div>¥<span class="subtotal">${product.price}</span></div>
<div><a href="#" class="del">删除</a></div>
</div>`;
// 将HTML添加到购物车列表
document.querySelector("#
listBox").innerHTML += html;
// 重新绑定事件监听器
a();
}
，这是我的index.html:<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>京东商城 - 购物车</title>
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<header></header>
<div class="content">
<div class="t-head"><h4>全部商品</h4></div>
<div class="sct">
<div class="thead">
<div><input type="checkbox" class="selectAll" /></div>
<div>
全选</div>
<div>商品</div>
<div>单价</div>
<div>数量</div>
<div>小计</div>
<div>操作</div>
</div>
<div id="
listBox">
<div class="item">
<div><input type="checkbox" name="check" /></div>
<div><img src="img/product5.jpg" height="100" /></div>
<div>光明 纯牛奶250mL*24盒</div>
<div>¥<span class="price">58.80</span></div>
<div><input type="number" value="1" min="1" /></div>
<div>¥<span class="subtotal">58.80</span></div>
<div><a href="#" class="del">删除</a></div>
</div>
<div class="item">
<div><input type="checkbox" name="check" /></div>
<div><img src="img/product5.jpg" height="100" /></div>
<div>光明 纯牛奶250mL*24盒</div>
<div>¥<span class="price">58.80</span></div>
<div><input type="number" value="1" min="1" /></div>
<div>¥<span class="subtotal">58.80</span></div>
<div><a href="#" class="del">删除</a></div>
</div>
<div class="item">
<div><input type="checkbox" name="check" /></div>
<div><img src="img/product5.jpg" height="100" /></div>
<div>光明 纯牛奶250mL*24盒</div>
<div>¥<span class="price">58.80</span></div>
<div><input type="number" value="1" min="1" /></div>
<div>¥<span class="subtotal">58.80</span></div>
<div><a href="#" class="del">删除</a></div>
</div>
<div class="item">
<div><input type="checkbox" name="check"></div>
<div><img src="img/product1.jpg" height="100"></div>
<div>新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15i5-10210U 16 512G独显灰</div>
<div>¥<span class="price">5239.00</span></div>
<div><input type="number" value="1" min="1"></div>
<div>¥<span class="subtotal">5239.00</span></div>
<div><a href="#" class="del">删除</a></div>
</div>
</div>
<div class="countBox">
<div><input type="checkbox" class="selectAll" /></div>
<div>
全选 <a href="#" id="delcheck">删除
选中的商品</a></div>
<div>
<span class="gray">总价:</span> ￥<span id="totalprice">0.00</span>
</div>
<div>去结算</div>
</div>
</div>
</div>
<div class="p-head"><h5>猜你喜欢</h5></div>
<div class="productsBox">
<div class="product">
<img src="img/product1.jpg" height="100" />
<p>
新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15
i5-10210U 16 512G独显灰
</p>
<div>¥5239.00</div>
<button class="add-to-cart">
<i class="fa fa-shopping-cart" aria-hidden="true"></i> 加入购物车
</button>
</div>
<div class="product">
<img src="img/product1.jpg" height="100" />
<p>
新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15
i5-10210U 16 512G独显灰
</p>
<div>¥5239.00</div>
<button>
<i class="fa fa-shopping-cart" aria-hidden="true"></i> 加入购物车
</button>
</div>
</div>
<footer></footer>
<script src="js/shoppingcar.js"></script>
</body>
</html>,这是我的productsjson{
"status": "success",
"data": [
{
"name": "新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15i5-10210U 16 512G独显灰",
"img": "product1.jpg",
"price": "5239.00"
},
{
"name": "新款Huawei/华为折叠手机mates xs5g版大屏双屏全面屏双面屏官方旗舰店对折手机可折叠屏 Mate XS折叠",
"img": "product2.jpg",
"price": "20980.00"
},
{
"name": "华为智慧屏V55i-A 55英寸 HEGE-550 4K超薄全面屏液晶电视机 多方视频通话AI升降摄像头 4GB+64GB 星际黑",
"img": "product3.jpg",
"price": "3999.00"
},
{
"name": "华为荣耀智能手表WATCH Magic运动男女2Pro手环定位NFC支付陶瓷版（流沙杏）",
"img": "product4.jpg",
"price": "699.00"
}
]
}
,请详细注释shoppingcar.js中每行代码的意思
本文介绍了一个使用 ASP.NET 实现的列表框数据操作示例，包括两个列表框之间的数据移动、全选和全清操作，并通过 JavaScript 完成交互。此外还提供了将列表框数据复制到隐藏域的方法。
扫一扫
2398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
