不多讲,逻辑很简单,小白写法,直接运行代码
1:样式部分
body{
background: #f5f5f5;
}
.head{
width: 100%;
height: 4.4rem;
border-bottom: 1px solid #DDDDDD;
text-align: center;
line-height: 4.4rem;
font-size:1.8rem;
font-family:PingFangSC-Regular;
color:rgba(34,34,34,1);
position: relative;
background: white;
}
.head-img{
width: 0.95rem;
height: 1.7rem;
position: absolute;
left: 1rem;
top: 0;
}
.head-img img{
width: 100%;
}
.main{
width:100%;
background:rgba(255,255,255,1);
margin-top: 0.8rem;
margin-bottom: 5rem;
}
.main1{
width: 100%;
border-bottom: 1px solid #EDEDED;
}
.main1-a{
width: 95%;
height: 5rem;
margin: auto;
display: flex;
align-items: center;
}
.allcheck{
width:2.1rem;
height:2.1rem;
background: url(../../img/d_cart.png);
background-size: 100% 100%;
border-radius: 50%;
}
.lttx{
width:1.8rem;
height:1.8rem;
margin-left: 1rem;
}
.lttx img{
width: 100%;
}
.ltwen{
font-size:1.2rem;
color:rgba(68,73,75,1);
margin-left: 1rem;
}
.ltsl{
font-size:1.2rem;
color:rgba(68,73,75,1);
margin-left: 0.5rem;
}
.back{
width:0.55rem;
height:1rem;
margin-left: 2rem;
}
.back img{
width: 100%;
}
.main2{
width: 95%;
height: 12rem;
margin: auto;
display: flex;
align-items: center;
}
.check{
width:2.1rem;
height:2.1rem;
background: url(../../img/d_cart.png);
background-size: 100% 100%;
border-radius: 50%;
}
.checkbox{
width:2.1rem;
height:2.1rem;
opacity: 1;//后期将其设置为0,然后给父级元素改变背景图来优化效果
}
.checks{
background: url(../../img/d_select.png);
background-size: 100% 100%;
}
.sptp{
width:9.6rem;
height:9.6rem;
margin-left: 1.5rem;
}
.sptp img{
width: 100%;
height: 100%;
}
.spwz{
width: 25rem;
height: 9.6rem;
margin-left: 1.5rem;
border-bottom: 1px solid #EDEDED;
}
.sp-mc{
width: 17rem;
font-size:1.3rem;
color:rgba(44,49,52,1);
line-height:1.9rem;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.sp-color{
font-size:1.3rem;
color:rgba(141,141,141,1);
line-height:1.9rem;
margin-top: 0.3rem;
}
.maney{
font-size:1.4rem;
color:rgba(230,54,54,1);
line-height:1.9rem;
}
.spzj{
display: flex;
margin-top: 0.3rem;
width: 20rem;
justify-content: space-between;
align-items: center;
}
.spzj-you{
display: flex;
}
.jian,.jia{
width:2.55rem;
height:2.6rem;
background:white;
outline: none;
font-size: 2rem;
color: #ccc;
border: 1px solid #D7D7D7;
}
.num{
width:6.6rem;
height:2.6rem;
background:rgba(246,246,246,1);
outline: none;
border: none;
margin-left: 0.5rem;
margin-right: 0.5rem;
font-size: 1.5rem;
}
.foot{
width: 100%;
height:4.75rem;
background:rgba(255,255,255,1);
position: fixed;
bottom: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.footoot{
width: 95%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.foot-left{
align-items: center;
display: flex;
}
.qx{
font-size:1.4rem;
color:rgba(117,117,117,1);
margin-left: 1rem;
}
.foot-right{
display: flex;
align-items: center;
}
.quanxuan{
width:2.1rem;
height:2.1rem;
border: 1px solid #ccc;
border-radius: 50%;
}
.red{
font-size:1.4rem;
color:rgba(245,89,89,1);
margin-right: 1rem;
}
.btn{
width:9.9rem;
height:4.75rem;
background:rgba(237,84,82,1);
outline: none;
border: none;
font-size:1.3rem;
color:rgba(255,255,255,1);
}
.nono{
margin: auto;
display: none;
}
.nono-img{
width: 7rem;
height: 6rem;
margin: auto;
}
.nono-img img{
width: 100%;
}
.nono p{
text-align: center;
margin-top: 2rem;
font-size: 1.7rem;
color: #666;
}
2.页面级js部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/cart.css">
<script type="text/javascript">
(function(win,doc){
// 设置根节点字体
var resize='orientationchange' in window?'orientationchange':'resize';
function change(){
var html=doc.documentElement;
var deviceWidth = html.clientWidth;
html.style.fontSize=deviceWidth/37.5+'px';
}
win.addEventListener(resize,change,false);
win.addEventListener('load',change,false);
doc.addEventListener('DOMContentLoaded',change,false);
})
</script>
</head>
<body>
<!-- head -->
<div class="head">
<p>购物车</p>
<div class="head-img">
<img src="../../img/d_share.png">
</div>
</div>
<!-- main -->
<div class="main">
<div class="main-box">
<div class="main1">
<div class="main1-a">
<div class="allcheck">
<input type="checkbox" class="checkbox" name="">
</div>
<div class="lttx">
<img src="https://yst-pjyc-server.oss-cn-beijing.aliyuncs.com/datas/image/20180317/20180317114730239520503.png">
</div>
<div class="ltwen">
<p>老炮</p>
</div>
<div class="ltsl">
</div>
<div class="back">
<img src="../../img/d_cart3.png">
</div>
</div>
</div>
<div class="main2 shop0" data-price="0.01" data-psid="1702" data-cartid="242" data-num="1" data-kunum="1" data-zongjia="0.01">
<div class="check">
<input type="checkbox" class="checkbox" name="">
</div>
<div class="sptp">
<img src="https://yst-pjyc-server.oss-cn-beijing.aliyuncs.com/datas/image/20180317/20180317163702969961566.jpeg">
</div>
<div class="spwz">
<p class="sp-mc">压迫感</p>
<p class="sp-color">白色</p>
<div class="spzj">
<p class="maney">¥<span class="maney1">0.01</span></p>
<div class="spzj-you">
<button class="jian">-</button><button class="num" value="1">1</button><button class="jia">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="main-box">
<div class="main1">
<div class="main1-a">
<div class="allcheck">
<input type="checkbox" class="checkbox" name="">
</div>
<div class="lttx">
<img src="https://yst-pjyc-server.oss-cn-beijing.aliyuncs.com/datas/image/20180317/20180317114502725808403.png">
</div>
<div class="ltwen">
<p>山大王</p>
</div>
<div class="ltsl"></div>
<div class="back">
<img src="../../img/d_cart3.png">
</div>
</div>
</div>
<div class="main2 shop0" data-price="0.1" data-psid="1676" data-cartid="243" data-num="1" data-kunum="6" data-zongjia="0.1">
<div class="check">
<input type="checkbox" class="checkbox" name="">
</div>
<div class="sptp">
<img src="https://yst-pjyc-server.oss-cn-beijing.aliyuncs.com/datas/image/20180317/20180317152045031040251.jpeg">
</div>
<div class="spwz">
<p class="sp-mc">小白盒</p>
<p class="sp-color">2</p>
<div class="spzj">
<p class="maney">¥<span class="maney1">0.1</span></p>
<div class="spzj-you"><button class="jian">-</button><button class="num" value="1">1</button><button class="jia">+</button>
</div>
</div>
</div>
</div>
<div class="main2 shop1" data-price="0.1" data-psid="1689" data-cartid="244" data-num="1" data-kunum="6" data-zongjia="0.1">
<div class="check">
<input type="checkbox" class="checkbox" name="">
</div>
<div class="sptp">
<img src="https://yst-pjyc-server.oss-cn-beijing.aliyuncs.com/datas/image/20180317/20180317155703697584914.jpeg">
</div>
<div class="spwz">
<p class="sp-mc">狗狗</p>
<p class="sp-color">2</p>
<div class="spzj">
<p class="maney">¥<span class="maney1">0.1</span></p>
<div class="spzj-you"><button class="jian">-</button><button class="num" value="1">1</button><button class="jia">+</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- foot -->
<div class="foot">
<div class="footoot">
<div class="foot-left">
<div class="quanxuan">
<input type="checkbox" class="checkbox" name="" >
</div>
<p class="qx">全选</p>
</div>
<div class="foot-right">
<p class="red">商品总价:<span class="allmaney-a">¥<span id="allmaney">0</span></span></p>
<button class="btn">去结算</button>
</div>
</div>
</div>
<!-- 空 -->
<div class="nono">
<div class="nono-img">
<img src="../../img/d_shopcart.png">
</div>
<p>购物车竟然是空的~</p>
</div>
</body>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript">
//店铺全选 取消全选
var status=false;
var len1=0;
var all_len=0;
var all_check=0;
$(document).on('click','.allcheck input',function(){
var that=$(this);
var child_input=$(this).parent().parent().parent().parent().find('.main2 input');
$.each(child_input, function() {
if(that.is(':checked')){
$(this).prop('checked',true);
$(this).parent().addClass('checks');
that.parent().addClass('checks');
}else{
$(this).prop('checked',false);
$(this).parent().removeClass('checks');
that.parent().removeClass('checks');
}
});
})
//单选取消全选
$(document).on('click','.main2 input',function(){
var inps=$(this).parents(".main-box").find('.main2 input');
var len2=inps.length;
$.each(inps, function(i,elem) {
if($(elem).prop('checked')){
$(elem).parent().addClass('checks');
len1++;
}else{
$(elem).parent().removeClass('checks');
}
});
var per_inp=$(this).parents(".main-box").find('.main1 .allcheck input');
if(len2==len1){
$(per_inp).prop('checked',true);
$(per_inp).parent().addClass('checks');
}
if(len2!=len1){
$(per_inp).prop('checked',false);
$(per_inp).parent().removeClass('checks');
}
len1=0;
})
//全选
$(document).on('click','.quanxuan input',function(){
var all_inp=$('.main-box input');
var all_status=$(this).prop('checked');
$.each(all_inp,function(){
$(this).prop('checked',all_status);
if(all_status){
$(this).parent().addClass('checks');
}else{
$(this).parent().removeClass('checks');
}
})
})
//单独input
$(document).on('click','input',function(){
var all_inp=$('.main-box input');
// console.log(all_inp)
all_len=all_inp.length;
if($(this).is(':checked')){
$(this).parent().addClass('checks');
}else{
$(this).parent().removeClass('checks');
}
$.each(all_inp,function(i,elem){
if($(elem).prop('checked')){
all_check++;
}
})
if(all_check==all_len){
$('.quanxuan input').prop('checked',true);
$('input').parent().addClass('checks');
}else{
$('.quanxuan').removeClass('checks')
$('.quanxuan input').prop('checked',false);
}
all_check=0;
})
</script>
</html>