常利用到的方法：
find(),filter(),forEach(),every()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车</title>
</head>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
header{
width: auto;
height: 26px;
position: relative!important;
background: #f2f2f2;
z-index: 99999;
-webkit-transform: translate3d(0,0,0);
border-bottom: 1px solid #e5e5e5;
}
.sn-container {
height: inherit;
width: 990px;
margin: 0 auto;
}
.content{
width: 990px;
height: 700px;
overflow-y: scroll;
margin: 10px auto;
}
.container{
width: 100%;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]{
-moz-appearance: textfield;
}
tbody td{
text-align: center;
}
input[type="checkbox"]{
cursor: pointer;
}
.btn input[type="number"]{
text-align: center;
width: 30px;
}
.imgs img{
height: 120px;
height: 100px;
}
.footer{
width: 990px;
margin: 20px auto;
border: 1px solid #ccc;
}
.footer p{
padding: 10px;
}
.footer p span{
color: red;
font-weight: bold;
}
.shpping{
float: right;
outline: none;
cursor: pointer;
padding: 7px 22px;
background-color: orangered;
border: none;
color: #fff;
}
.btn button{
padding: 0px 10px;
cursor: pointer;
}
.del:active{
background-color:#FF0036 ;
}
.pro{
display: flex;
justify-content: space-between;
}
.del{
padding: 6px 15px;
outline: none;
cursor: pointer;
color: #fff;
background-color: rgb(240, 76, 76);
border: none;
border-radius: 5px;
}
.active{
background-color: sandybrown !important;
}
</style>
<body>
<header>
<div class="sn-container">
</div>
</header>
<div class="content">
<table class="container" border="1" style="border-color: #eee;" cellspacing="0">
<thead>
<th><input type='checkbox' class="checkAll"></th>
<th>id</th>
<th>商品图片</th>
<th>商品名称</th>
<th>价格</th>
<th>数量</th>
<th>操作</th>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="footer">
<div class="pro">
<p>商品总价格：<span>￥</span><span class="totprice">111</span></p>
<p>已选商品数量<span class="produc_count" style="padding: 0 10px;">1</span>件</p>
<button class="shpping">立即购买</button>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
let goodslist=[
{
id:1,
img:'./img/mzp.jpg',
name:'憨憨猫抓板',
price:41.9,
money:41.9,
count:1,
checked:false
},
{
id:2,
img:'./img/zxw.jpg',
name:'猫咪造型窝',
price:260,
money:130,
count:2,
checked:true
},
{
id:3,
img:'./img/mdg.jpg',
name:'猫冻干零食',
price:75,
money:75,
count:1,
checked:false
}, {
id:4,
img:'./img/hhdg.jpg',
name:'憨憨冻干大礼包',
price:69,
money:69,
count:1,
checked:true
},
{
id:5,
img:'./img/bb.jpg',
name:'憨憨外出背包',
price:55,
money:55,
count:1,
checked:false
}
]
//页面商品赋值，每次方法运行即可刷新每一项
function newlist(){
let list
goodslist.forEach((item,index)=>{
item.checked=item.checked?'checked':''
list+=`
<tr class="tr${item.id}">
<td><input class="check" onclick="checkwhy(${item.id})" type='checkbox' ${item.checked}></td>
<td>${item.id}</td>
<td class="imgs">
<img src="${item.img}" alt="">
</td>
<td>${item.name}</td>
<td>￥${item.price}</td>
<td class="btn">
<button onclick=subtraction(${item.id})>-</button><input type="number" value="${item.count}"><button onclick="add(${item.id})">+</button>
</td>
<td>
<button class="del" onclick="del(${item.id})">删除</button>
</td>
</tr>
`
$('tbody').html(list)
})
let allcheck=document.querySelectorAll('.check')
allcheck.forEach((item,index)=>{
item.setAttribute('id',goodslist[index].id)
// 判断选中check的添加类
let addcheck=goodslist.filter(item=>{ return item.checked!=false})
//计算被选购商品数量
let produc_count=document.querySelector('.produc_count')
produc_count.innerHTML=addcheck.length
addcheck.forEach(item=>{ $(`.tr${item.id}`).addClass('active')})
})
}
newlist()
//总额计算
function conuntMoney(){
let totalmoney=0;
let good= goodslist.filter(item=>{
return item.checked
})
console.log(good)
good.forEach(res=>{
totalmoney+=(res.money*res.count)
})
$('.totprice').text(totalmoney)
}
conuntMoney()
let isAll=false
// 全选
$('.checkAll').click(function(){
let mes=this
goodslist.forEach((checkAlls,index)=>{
checkAlls.checked=mes.checked
let checked=document.querySelectorAll('.check');
checked[index].checked=mes.checked
if(mes.checked){
$('.check').attr('checked')
}
})
conuntMoney()
newlist()
})
// 加数量
function add(id){
let good=goodslist.find(res=> res.id==id)
good.count+=1
if(good.count>10) good.count=10;
good.price=(good.money*good.count).toFixed(2)
conuntMoney()
newlist()
}
// 减少数量
function subtraction(id){
let good=goodslist.find(res=> res.id==id)
good.count-=1
if(good.count<1) good.count=1;
good.price=(good.money*good.count).toFixed(2)
conuntMoney()
newlist()
}
function checkwhy(e){
let desc= goodslist.find(res=>{
return res.id==e
})
desc.checked=!desc.checked
console.log(desc.checked)
let allNewcheck=goodslist.every(res=>{return res.checked })
$('.checkAll').prop('checked',allNewcheck)
conuntMoney()
newlist()
}
function del(e){
let goodse= goodslist.filter(res=>{
return e!=res.id
})
console.log(goodse)
goodslist=goodse
conuntMoney()
newlist()
}
</script>
</body>
</html>
网友评论