购物车原始页面:
先说说功能:
1、点击编辑,出现删除按钮,编辑变为完成两字;
2、点击删除,将当前这行的商品删除;
3、勾选任何一个复选框,立即购买按钮由禁用变为可用,同时,当勾选取消后,立即购买按钮回复原样;
4、勾选任何一个复选框时,合计金额变为所勾选的商品的金额之和;
接下来展示页面效果:
点击编辑后:
点击删除后:
删除之后:
实现原理:
页面 html代码:
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">购物车</h1>
<a class="mui-pull-right" id="showDel">编辑</a>
</header>
<div class="mui-content">
<div class="shopCart" id="shopCart">
<div class="shopCartItem">
<input class="iptSelect" type="checkbox">
<img title="10001" src="../administrator/goodsImg/ZSimg/zs0201.jpg" />
<div class="goodsInfo" style="display: block;">
<p class="shopTitle">商品4</p>
<p class="shopPrice"> ¥1235 </p>
</div>
<div class="goodsOpreation">
<span class="goodsCount">商品数量:1</span>
<span class="shopDel">删除</span>
</div>
</div>
<div class="shopCartItem">
<input class="iptSelect" type="checkbox">
<img title="10001" src="../administrator/goodsImg/HSimg/hs0101.jpg" />
<div class="goodsInfo" style="display: block;">
<p class="shopTitle">商品1</p>
<p class="shopPrice"> ¥1235 </p>
</div>
<div class="goodsOpreation">
<span class="goodsCount">商品数量:1</span>
<span class="shopDel">删除</span>
</div>
</div>
<div class="shopCartItem">
<input class="iptSelect" type="checkbox">
<img title="10001" src="../administrator/goodsImg/OSimg/os0101.jpg" />
<div class="goodsInfo" style="display: block;">
<p class="shopTitle">商品2</p>
<p class="shopPrice"> ¥1235 </p>
</div>
<div class="goodsOpreation">
<span class="goodsCount">商品数量:1</span>
<span class="shopDel">删除</span>
</div>
</div>
<div class="shopCartItem">
<input class="iptSelect" type="checkbox">
<img title="10001" src="../administrator/goodsImg/ZSimg/zs0101.jpg" />
<div class="goodsInfo" style="display: block;">
<p class="shopTitle">商品3</p>
<p class="shopPrice"> ¥1235 </p>
</div>
<div class="goodsOpreation">
<span class="goodsCount">商品数量:1</span>
<span class="shopDel">删除</span>
</div>
</div>
<div class="mui-bar mui-bar-tab">
<p class="totalPrice">
合计:<span id="totalPrice">¥0</span>
</p>
<p class="buyNow">
<button id="buyNowBtn" class="buyNowBtn" disabled="disabled">立即购买</button>
</p>
</div>
</div>
js代码:
1、点击编辑,出现删除按钮,编辑变为完成两字:
document.getElementById('showDel').addEventListener('tap',function () {
if(this.innerHTML=='编辑'){
this.innerHTML='完成';
}else{
this.innerHTML='编辑';
}
var goodsInfo=document.getElementsByClassName('goodsInfo');
var goodsOpreation=document.getElementsByClassName('goodsOpreation');
if(goodsInfo.length>0){
var goodsInfoStyles=goodsInfo[0].getAttribute("style");
var goodsInfoStatus=goodsInfoStyles.split(':')[1];
}else{
document.getElementById("shopCart").innerHTML='<p>您的购物车是空的哟</p>';
}
//切换删除按钮
if(goodsInfoStatus!='none'){
for(var i=0;i<goodsInfo.length;i++){
goodsInfo[i].setAttribute('style','display:none');
goodsOpreation[i].setAttribute('style','display:block');
}
}else{
for(var j=0;j<goodsInfo.length;j++){
goodsOpreation[j].setAttribute('style','display:none');
goodsInfo[j].setAttribute('style','display:block');
}
}
});
2、点击删除,将当前这行的商品删除;
mui('.goodsOpreation').on('tap','.shopDel',function(){
var btnArr=['确定','再看看'];
//获取到当前删除节点
var thisNode=this.parentNode.parentNode;
mui.confirm(' ','确定删除该商品?',btnArr,function(e){
if(e.index==0){
thisNode.remove();
}
});
});
3、勾选任何一个复选框,立即购买按钮由禁用变为可用,同时,当勾选取消后,立即购买按钮恢复原样;
mui(document.body).on('change','.iptSelect',function(){
//购物车中复选框
var iptSelect=document.getElementsByClassName('iptSelect');
//判断是否选择
var checked=false;
//获取到当前商品ID,以便购买时将商品信息发送到服务器
var goodsIdArr=[];
var goodId;
//所勾选商品的价格
var priceArr=[];
var price=0;
//添加之前先清空数组,防止之前添加的还在,
//比如当你已经勾选了了四个,现在要放弃两个,那么那个就不应该再在这里面
goodsIdArr.splice(0,goodsIdArr.length);
priceArr.splice(0,priceArr.length);
for (var j=0;j<iptSelect.length;j++) {
if(iptSelect[j].checked){
//如果勾选了获取所勾选商品的ID和价格
goodId=parseInt(iptSelect[j].getAttribute('value'));
priceStr=iptSelect[j].parentNode.children[2].children[1].innerHTML;
var reg=/[0-9]+/g;
//将¥符号过滤,并且强制转换为数字类型
price=parseInt(priceStr.match(reg));
//如果不为空,且已经不存在于数组,才添加至数组
if(goodId !=undefined && goodsIdArr.indexOf(goodId)==-1 ){
goodsIdArr.push(goodId);
priceArr.push(price);
}
}
}
4、勾选任何一个复选框时,合计金额变为所勾选的商品的金额之和;
//总计
var totalPrice=0;
for(var z=0;z<priceArr.length;z++){
totalPrice=totalPrice+priceArr[z];
}
document.getElementById("totalPrice").innerHTML='¥'+totalPrice;
//获取当前有INPUT框勾选,如有则将buyNowBtn设为可用的
for(var i=0;i<iptSelect.length;i++){
if(iptSelect[i].checked){
checked=true;
mui('#buyNowBtn')[0].disabled=false;
//这个return,个人想这个想了好久,老是不出现想要的效果,
//第一次,没有return,结果只有勾选最后一个才有效,
//因为,无论你勾选了多少个,只要最后一个不勾选,
//当循环到最后时,checked都会变为false,即立即购买都会变为禁用,
//按道理来讲,只要查询到有勾选的,则将其设为可用,跳出循环。
return;
}else{
checked=false;
mui('#buyNowBtn')[0].disabled=true;
}
}
});
css链接:这里写链接内容
第一次写这么长的博客,点个赞再走呗~