購物車單選、多選等功能
阿新 • • 發佈：2019-02-17
不多講，邏輯很簡單，小白寫法，直接執行程式碼
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>