删除只能从后面开始删
删除第一个后，索引变为-1报错
帮解决一下
<!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>
<style>
* {
margin: 0;
padding: 0;
}
.clearfix:after {
clear: both;
overflow: hidden;
display: block;
content: "";
}
.box {
width: 100vw;
background-color: #ccc;
}
.shop_bg {
width: 100vw;
height: 46vw;
background-image: linear-gradient(to right, #fe8000, #ff5700);
}
.shop_title {
display: flex;
justify-content: space-between;
padding: 5vw;
}
.shop_title p {
font-size: 6vw;
color: white;
font-weight: bold;
}
.shop_any {
font-size: 3vw;
color: white;
padding-left: 5vw;
}
.shop_list {
width: 94vw;
background: #fff;
margin: 0 3vw;
border-radius: 2vw;
margin-top: -20vw;
}
.shop_list ul {
list-style: none;
padding: 2vw;
}
.shop_list ul .shop_buys img {
width: 5vw;
margin-right: 2vw;
}
.shop_list ul .shop_buys span {
font-size: 3vw;
vertical-align: super;
}
.shop_list ul li {
margin-top: 4vw;
}
.shop_list ul li .book_left {
width: 39vw;
float: left;
}
.shop_list ul li .book_left img {
display: inline-block;
width: 5vw;
margin-right: 2vw;
margin-top: 10vw;
}
.shop_list ul li .book_left img:nth-child(2) {
width: 30vw;
float: right;
margin: 0;
}
.shop_list ul li .book_right {
width: 49vw;
float: right;
}
.shop_list ul li .book_right .title {
font-size: 4vw;
}
.shop_list ul li .book_right .book_des {
width: 50vw;
background-color: #ccc;
font-size: 4vw;
color: gray;
padding: 2vw;
box-sizing: border-box;
margin-top: 2vw;
}
.shop_list ul li .book_right .book_bottom {
display: flex;
justify-content: space-between;
margin-top: 4vw;
}
.shop_list ul li .book_right .book_bottom span {
color: #fe8000;
}
.shop_list ul li .book_right .book_bottom ul li {
float: left;
width: 5vw;
margin: 0 1vw;
}
.shop_list ul li .book_right .book_bottom ul li input {
display: block;
width: 7vw;
text-align: center;
outline: none;
border: 1px solid #ccc;
height: 5vw;
}
.shop_list ul li .book_right .book_bottom ul li img {
width: 6vw;
}
.shop_footer {
display: flex;
justify-content: space-between;
padding: 0 6vw;
box-sizing: border-box;
width: 100vw;
height: 14vw;
line-height: 14vw;
background-color: #fff;
}
.shop_footer .footer_left img {
width: 5vw;
}
.shop_footer .footer_right span i {
color: #fe8000;
font-style: normal;
}
.shop_footer .footer_right button {
width: 15vw;
height: 6vw;
border-radius: 4vw;
color: white;
border: none;
background-color: #fe8000;
}
.del {
display: none;
}
#panel {
width: 100%;
height: 662%;
background-color: #000;
opacity: 0.4;
position: absolute;
left: 0;
top: 0;
display: none;
z-index: 9;
}
#login {
width: 82vw;
height: 50vw;
background: #fff;
border-radius: 5px;
position: fixed;
left: calc(50% - 200px);
top: 50%;
z-index: 99999;
display: none;
}
#del {
width: 82vw;
height: 50vw;
background: #fff;
border-radius: 5px;
position: fixed;
left: calc(50% - 200px);
top: 50%;
z-index: 99999;
display: none;
}
</style>
</head>
<body>
<div class="box">
<div class="shop_bg">
<div class="shop_title">
<p class="list_num"></p>
<p class="guanli">管理</p>
</div>
<div class="shop_any">
<p class="list_num1"></p>
</div>
</div>
<div class="shop_list ">
<ul class="sp_list clearfix">
<li class="shop_buys">
<img src="./images/checked.webp" alt="" class="buys_img" />
<img src="./images/logo.webp" alt="" />
<span>聪明豆图书专营店</span>
</li>
</ul>
</div>
<div class="shop_footer">
<div class="footer_left">
<img src="./images/checked.webp" alt="" class="all_num">
<span>全选</span>
</div>
<div class="footer_right">
<span class="heji">合计：<i>￥0</i></span>
<button class="sub">结算(0)</button>
<button class="del">删除</button>
</div>
</div>
<div id="panel"></div>
<div id="login">
<p>数量不能小于1</p>
</div>
<div id="del">
<div>
<p>确认删除1个宝贝</p>
<div>
<span>再想想</span>
<span>删除</span>
</div>
</div>
</div>
</div>
<script src="./js/index2.js"></script>
</body>
</html>
</html>
```javascript
let data = [
{
imgSrc: "./images/1.webp",
name: "儿童3d立体翻翻0-4情景海洋绘本",
price: 79,
ischeck: false,
count: 1,
},
{
imgSrc: "./images/2.webp",
name: "儿童3d立体翻翻0-4情景海洋绘本",
price: 39,
ischeck: false,
count: 1,
},
{
imgSrc: "./images/3.webp",
name: "儿童3d立体翻翻0-4情景海洋绘本",
price: 49,
ischeck: false,
count: 1,
},
{
imgSrc: "./images/4.webp",
name: "儿童3d立体翻翻0-4情景海洋绘本",
price: 129,
ischeck: false,
count: 1,
},
{
imgSrc: "./images/5.webp",
name: "儿童3d立体翻翻0-4情景海洋绘本",
price: 89,
ischeck: false,
count: 1,
},
{
imgSrc: "./images/6.webp",
name: "儿童3d立体翻翻0-4情景海洋绘本",
price: 29,
ischeck: false,
count: 1,
},
];
let ul = document.querySelector(".sp_list");
// 渲染数据
function render(data, UL) {
for (let i = 0; i < data.length; i++) {
var uLi = document.createElement("li");
uLi.className = " sp_list1 clearfix";
uLi.innerHTML = `
<div class="book_left">
<img src='./images/checked.webp' alt="" class='checkImg'/>
<img src=${data[i].imgSrc} alt="" />
</div>
<div class="book_right">
<p class="title">${data[i].name}</p>
<div class="book_des">
<p>【第一辑】+【第三辑】共8册</p>
</div>
<div class="book_bottom">
<span class='shop_price'>￥${data[i].price}</span>
<ul>
<li class='minus'><img src="./images/minus.png" alt="" /></li>
<li><input type="text" value=${data[i].count} class='list_num2' /></li>
<li class='add'><img src="./images/add.png" alt="" /></li>
</ul>
</div>
</div>
`;
UL.appendChild(uLi);
}
}
render(data, ul);
let checkImg = document.getElementsByClassName("checkImg"); // 每个图片
let sp_list1 = document.getElementsByClassName("sp_list1"); // 每个li
let all_num = document.querySelector(".all_num"); //全选
let buys_img = document.querySelector(".buys_img");
let list_num2 = document.querySelectorAll(".list_num2");
let add = document.querySelectorAll(".add");
let minus = document.querySelectorAll(".minus");
let guanli = document.querySelector(".guanli");
let del = document.querySelector(".del");
for (const g in data) {
checkImg[g].onclick = function () {
if (data[g].ischeck == false) {
data[g].ischeck = true;
} else {
data[g].ischeck = false;
}
checkImg[g].src = data[g].ischeck
? "./images/checked_selected.webp"
: "./images/checked.webp";
// 全选
all_num.src = data.every((j) => j.ischeck)
? "./images/checked_selected.webp"
: "./images/checked.webp";
buys_img.src = data.every((j) => j.ischeck)
? "./images/checked_selected.webp"
: "./images/checked.webp";
sp_list1[g].style.background = data[g].ischeck ? "#ccc" : "none";
totalPrice();
};
add[g].onclick = function () {
console.log(data[g]);
data[g].count++;
list_num2[g].value = data[g].count;
totalPrice();
};
minus[g].onclick = function () {
data[g].count--;
if (data[g].count < 1) {
data[g].count = 1;
}
list_num2[g].value = data[g].count;
totalPrice();
};
}
let flag2 = false;
all_num.onclick = function () {
isTrue(flag2, all_num, buys_img);
totalPrice();
};
let flag3 = false;
buys_img.onclick = function () {
isTrue(flag3, buys_img, all_num);
totalPrice();
};
guanli.onclick = function () {
if (guanli.innerHTML == "管理") {
document.querySelector(".heji").style.display = "none";
document.querySelector(".sub").style.display = "none";
document.querySelector(".del").style.display = "block";
guanli.innerHTML = "完成";
} else {
document.querySelector(".heji").style.display = "block";
document.querySelector(".sub").style.display = "block";
document.querySelector(".del").style.display = "none";
guanli.innerHTML = "管理";
}
};
del.onclick = function () {
let index = data.findIndex((e) => e.ischeck);
for (let d = data.length - 1; d >= 0; d--) {
if (data[index].ischeck) {
sp_list1[index].remove();
data.splice(index, 1);
}
}
if (data.length == 0) {
document.querySelector(".shop_list").style.display = "none";
document.querySelector(".shop_footer").style.display = "none";
}
totalPrice();
};
function isTrue(flag, imgSrcs, imgSrcs1) {
if (!flag && !data.every((j) => j.ischeck)) {
flag = true;
} else if (data.every((j) => j.ischeck)) {
flag = false;
}
imgSrcs.src = flag
? "./images/checked_selected.webp"
: "./images/checked.webp";
imgSrcs1.src = imgSrcs.src;
for (let w of checkImg) {
w.src = imgSrcs.src;
}
for (const q of data) {
q.ischeck = flag;
}
for (const e of sp_list1) {
e.style.background = flag ? "#ccc" : "none";
}
}
totalPrice();
function totalPrice() {
let total = 0;
let counttype = 0;
let allcount = 0;
for (let i in data) {
if (data[i].ischeck) {
total += Number(data[i].price) * Number(data[i].count);
counttype++;
allcount += Number(data[i].count);
}
}
document.querySelector(".heji").innerHTML = `￥${total}`;
document.querySelector(".sub").innerHTML = `结算(${counttype})`;
document.querySelector(".del").innerHTML = `删除(${counttype})`;
}
```
