这是我的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("#del
check")
.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="del
check">删除选中的商品</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中每行代码的意思
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
