常利用到的方法:
find(),filter(),forEach(),every()
*{
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;
}
id | 商品图片 | 商品名称 | 价格 | 数量 | 操作 |
---|
商品总价格:¥111
已选商品数量1件
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+=`
`
$('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()
}