how2j.cn


43分59秒
本视频采用html5方式播放,如无法正常播放,请将浏览器升级至最新版本,推荐火狐,chrome,360浏览器。 如果装有迅雷,播放视频呈现直接下载状态,请调整 迅雷系统设置-基本设置-启动-监视全部浏览器 (去掉这个选项)。 chrome 的 视频下载插件会影响播放,如 IDM 等,请关闭或者切换其他浏览器

步骤 1 : 效果   
步骤 2 : 公共函数   
步骤 3 : 事件响应   
步骤 4 : 选中一种商品   
步骤 5 : 商品全选   
步骤 6 : 增加和减少数量   
步骤 7 : 直接修改数量   

购物车的js交互是相当复杂的,有如下事件需要监听
1. 点击全选
2. 点击某一个商品
3. 点击减少数量
4. 点击增加数量
5. 在数量输入框中修改数量

监听之后,需要做一些列响应动作
1. 结算按钮的状态调整
无任何商品选中是一种状态,有任意商品选中是一种状态
2. 全部选中按钮的状态同步
所有商品选中是一种状态,商品没有全选是一种状态
3. 计算一共有多少件商品被选中,以及价格小计和价格合计的显示
4. 被选中行背景高亮显示
运行效果
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> </head> <style> body{ font-size: 12px; font-family: Arial; } a{ color:#999; } a:hover{ text-decoration:none; color: #C40000; } div.cartProductChangeNumberDiv a { width: 14px; display: inline-block; text-align: center; color: black; text-decoration: none; } img.cartProductItemIfSelected, img.selectAllItem { cursor: pointer; } tr.cartProductItemTR { border: 1px solid #CCCCCC; } div.cartProductChangeNumberDiv { border: solid 1px #E5E5E5; width: 80px; } table.cartProductTable { width: 100%; font-size:12px; } span.cartProductItemOringalPrice { text-decoration: line-through; color: #9C9C9C; display: block; font-weight: bold; font-size: 14px; } div.cartProductChangeNumberDiv input { border: solid 1px #AAAAAA; width: 42px; display: inline-block; } div.cartProductChangeNumberDiv a { text-decoration: none; } img.cartProductImg { padding: 1px; border: 1px solid #EEEEEE; width: 80px; height: 80px; } a.cartProductLink { color: #3C3C3C; } a.cartProductLink:hover { color: #C40000; text-decoration: underline; } div.cartProductLinkOutDiv { position: relative; height: 80px; } span.cartSumNumber { color: #C40000; font-weight: bold; font-size: 16px; } tr.cartProductItemTR td { padding: 20px 20px; } span.cartSumPrice { color: #C40000; font-weight: bold; font-size: 20px; } span.cartProductItemPromotionPrice { font-family: Arial; font-size: 14px; font-weight: bold; color: #C40000; } span.cartProductItemSmallSumPrice { font-family: Arial; font-size: 14px; font-weight: bold; color: #C40000; } span.cartTitlePrice { color: #C40000; font-size: 14px; font-weight: bold; margin-left: 5px; margin-right: 3px; } div.cartProductLinkInnerDiv { position: absolute; bottom: 0; height: 20px; } div.cartTitle button { background-color: #AAAAAA; border: 1px solid #AAAAAA; color: white; width: 53px; height: 25px; border-radius: 2px; } div.cartFoot { background-color: #E5E5E5; line-height: 50px; margin: 20px 0px; color: black; padding-left: 20px; } div.cartFoot button { background-color: #AAAAAA; border: 0px solid #AAAAAA; color: white; height: 100%; width: 120px; height: 50px; font-size: 20px; text-align: center; } table.cartProductTable th { font-weight: normal; color: #3C3C3C; padding: 20px 20px; } table.cartProductTable th.selectAndImage{ width:140px; } table.cartProductTable th.operation{ width:30px; } div.cartDiv { max-width: 1013px; margin: 10px auto; color: black; } </style> <script> function formatMoney(num){ num = num.toString().replace(/\$|\,/g,''); if(isNaN(num)) num = "0"; sign = (num == (num = Math.abs(num))); num = Math.floor(num*100+0.50000000001); cents = num%100; num = Math.floor(num/100).toString(); if(cents<10) cents = "0" + cents; for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++) num = num.substring(0,num.length-(4*i+3))+','+ num.substring(num.length-(4*i+3)); return (((sign)?'':'-') + num + '.' + cents); } $(function(){ $("img.cartProductItemIfSelected").click(function(){ var selectit = $(this).attr("selectit") if("selectit"==selectit){ $(this).attr("src","https://how2j.cn/tmall/img/site/cartNotSelected.png"); $(this).attr("selectit","false") $(this).parents("tr.cartProductItemTR").css("background-color","#fff"); } else{ $(this).attr("src","https://how2j.cn/tmall/img/site/cartSelected.png"); $(this).attr("selectit","selectit") $(this).parents("tr.cartProductItemTR").css("background-color","#FFF8E1"); } syncSelect(); syncCreateOrderButton(); calcCartSumPriceAndNumber(); }); $("img.selectAllItem").click(function(){ var selectit = $(this).attr("selectit") if("selectit"==selectit){ $("img.selectAllItem").attr("src","https://how2j.cn/tmall/img/site/cartNotSelected.png"); $("img.selectAllItem").attr("selectit","false") $(".cartProductItemIfSelected").each(function(){ $(this).attr("src","https://how2j.cn/tmall/img/site/cartNotSelected.png"); $(this).attr("selectit","false"); $(this).parents("tr.cartProductItemTR").css("background-color","#fff"); }); } else{ $("img.selectAllItem").attr("src","https://how2j.cn/tmall/img/site/cartSelected.png"); $("img.selectAllItem").attr("selectit","selectit") $(".cartProductItemIfSelected").each(function(){ $(this).attr("src","https://how2j.cn/tmall/img/site/cartSelected.png"); $(this).attr("selectit","selectit"); $(this).parents("tr.cartProductItemTR").css("background-color","#FFF8E1"); }); } syncCreateOrderButton(); calcCartSumPriceAndNumber(); }); $(".orderItemNumberSetting").keyup(function(){ var pid=$(this).attr("pid"); var stock= $("span.orderItemStock[pid="+pid+"]").text(); var price= $("span.orderItemPromotePrice[pid="+pid+"]").text(); var num= $(".orderItemNumberSetting[pid="+pid+"]").val(); num = parseInt(num); if(isNaN(num)) num= 1; if(num<=0) num = 1; if(num>stock) num = stock; syncPrice(pid,num,price); }); $(".numberPlus").click(function(){ var pid=$(this).attr("pid"); var stock= $("span.orderItemStock[pid="+pid+"]").text(); var price= $("span.orderItemPromotePrice[pid="+pid+"]").text(); var num= $(".orderItemNumberSetting[pid="+pid+"]").val(); num++; if(num>stock) num = stock; syncPrice(pid,num,price); }); $(".numberMinus").click(function(){ var pid=$(this).attr("pid"); var stock= $("span.orderItemStock[pid="+pid+"]").text(); var price= $("span.orderItemPromotePrice[pid="+pid+"]").text(); var num= $(".orderItemNumberSetting[pid="+pid+"]").val(); --num; if(num<=0) num=1; syncPrice(pid,num,price); }); }) function syncCreateOrderButton(){ var selectAny = false; $(".cartProductItemIfSelected").each(function(){ if("selectit"==$(this).attr("selectit")){ selectAny = true; } }); if(selectAny){ $("button.createOrderButton").css("background-color","#C40000"); $("button.createOrderButton").removeAttr("disabled"); } else{ $("button.createOrderButton").css("background-color","#AAAAAA"); $("button.createOrderButton").attr("disabled","disabled"); } } function syncSelect(){ var selectAll = true; $(".cartProductItemIfSelected").each(function(){ if("false"==$(this).attr("selectit")){ selectAll = false; } }); if(selectAll) $("img.selectAllItem").attr("src","https://how2j.cn/tmall/img/site/cartSelected.png"); else $("img.selectAllItem").attr("src","https://how2j.cn/tmall/img/site/cartNotSelected.png"); } function calcCartSumPriceAndNumber(){ var sum = 0; var totalNumber = 0; $("img.cartProductItemIfSelected[selectit='selectit']").each(function(){ var oiid = $(this).attr("oiid"); var price =$(".cartProductItemSmallSumPrice[oiid="+oiid+"]").text(); price = price.replace(/,/g, ""); price = price.replace(/¥/g, ""); sum += new Number(price); var num =$(".orderItemNumberSetting[oiid="+oiid+"]").val(); totalNumber += new Number(num); }); $("span.cartSumPrice").html("¥"+formatMoney(sum)); $("span.cartTitlePrice").html("¥"+formatMoney(sum)); $("span.cartSumNumber").html(totalNumber); } function syncPrice(pid,num,price){ $(".orderItemNumberSetting[pid="+pid+"]").val(num); var cartProductItemSmallSumPrice = formatMoney(num*price); $(".cartProductItemSmallSumPrice[pid="+pid+"]").html("¥"+cartProductItemSmallSumPrice); calcCartSumPriceAndNumber(); } </script> <div class="cartDiv"> <div class="cartTitle pull-right"> <span>已选商品 (不含运费)</span> <span class="cartTitlePrice">¥0.00</span> <button class="createOrderButton" style="background-color: rgb(170, 170, 170);" disabled="disabled">结 算</button> </div> <div class="cartProductList"> <table class="cartProductTable"> <thead> <tr> <th class="selectAndImage"> <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="selectAllItem" selectit="false"> 全选 </th> <th>商品信息</th> <th>单价</th> <th>数量</th> <th width="120px">金额</th> <th class="operation">操作</th> </tr> </thead> <tbody> <tr class="cartProductItemTR" oiid="936" style="background-color: rgb(255, 255, 255);"> <td> <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="936" selectit="false"> <a href="#nowhere" style="display:none"><img src="https://how2j.cn/tmall/img/site/cartSelected.png"></a> <img src="https://how2j.cn/tmall/img/productSingle_middle/3665.jpg" class="cartProductImg"> </td> <td> <div class="cartProductLinkOutDiv"> <a class="cartProductLink" href="#nowhere">美国iRobot扫地机器人吸尘器全自动家用智能扫地机650 天猫电器城</a> <div class="cartProductLinkInnerDiv"> <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png"> <img title="消费者保障服务,承诺7天退货" src="https://how2j.cn/tmall/img/site/7day.png"> <img title="消费者保障服务,承诺如实描述" src="https://how2j.cn/tmall/img/site/promise.png"> </div> </div> </td> <td> <span class="cartProductItemOringalPrice">¥7580.0</span> <span class="cartProductItemPromotionPrice">¥5306.0</span> </td> <td> <div class="cartProductChangeNumberDiv"> <span pid="365" class="hidden orderItemStock ">75</span> <span pid="365" class="hidden orderItemPromotePrice ">5306.0</span> <a href="#nowhere" class="numberMinus" pid="365">-</a> <input value="1" autocomplete="off" class="orderItemNumberSetting" oiid="936" pid="365"> <a href="#nowhere" class="numberPlus" pid="365" stock="75">+</a> </div> </td> <td> <span pid="365" oiid="936" class="cartProductItemSmallSumPrice"> ¥5,306.00 </span> </td> <td> <a href="#nowhere" oiid="936" class="deleteOrderItem">删除</a> </td> </tr> <tr class="cartProductItemTR" oiid="935" style="background-color: rgb(255, 255, 255);"> <td> <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="935" selectit="false"> <a href="#nowhere" style="display:none"><img src="https://how2j.cn/tmall/img/site/cartSelected.png"></a> <img src="https://how2j.cn/tmall/img/productSingle_middle/8510.jpg" class="cartProductImg"> </td> <td> <div class="cartProductLinkOutDiv"> <a class="cartProductLink" href="#nowhere">阔腿裤三件套装女夏装2016新款大码雪纺时尚休闲气质棉麻九分裤潮</a> <div class="cartProductLinkInnerDiv"> <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png"> <img title="消费者保障服务,承诺7天退货" src="https://how2j.cn/tmall/img/site/7day.png"> <img title="消费者保障服务,承诺如实描述" src="https://how2j.cn/tmall/img/site/promise.png"> </div> </div> </td> <td> <span class="cartProductItemOringalPrice">¥235.0</span> <span class="cartProductItemPromotionPrice">¥152.75</span> </td> <td> <div class="cartProductChangeNumberDiv"> <span pid="809" class="hidden orderItemStock ">17</span> <span pid="809" class="hidden orderItemPromotePrice ">152.75</span> <a href="#nowhere" class="numberMinus" pid="809">-</a> <input value="1" autocomplete="off" class="orderItemNumberSetting" oiid="935" pid="809"> <a href="#nowhere" class="numberPlus" pid="809" stock="17">+</a> </div> </td> <td> <span pid="809" oiid="935" class="cartProductItemSmallSumPrice"> ¥152.75 </span> </td> <td> <a href="#nowhere" oiid="935" class="deleteOrderItem">删除</a> </td> </tr> </tbody> </table> </div> <div class="cartFoot"> <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" class="selectAllItem" selectit="false"> <span>全选</span> <!-- <a href="#">删除</a> --> <div class="pull-right"> <span>已选商品 <span class="cartSumNumber">0</span> 件</span> <span>合计 (不含运费): </span> <span class="cartSumPrice">¥0.00</span> <button class="createOrderButton" style="background-color: rgb(170, 170, 170);" disabled="disabled">结 算</button> </div> </div> </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
增值内容,请先登录
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
<script> function formatMoney(num){ num = num.toString().replace(/\$|\,/g,''); if(isNaN(num)) num = "0"; sign = (num == (num = Math.abs(num))); num = Math.floor(num*100+0.50000000001); cents = num%100; num = Math.floor(num/100).toString(); if(cents<10) cents = "0" + cents; for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++) num = num.substring(0,num.length-(4*i+3))+','+ num.substring(num.length-(4*i+3)); return (((sign)?'':'-') + num + '.' + cents); } function syncCreateOrderButton(){ var selectAny = false; $(".cartProductItemIfSelected").each(function(){ if("selectit"==$(this).attr("selectit")){ selectAny = true; } }); if(selectAny){ $("button.createOrderButton").css("background-color","#C40000"); $("button.createOrderButton").removeAttr("disabled"); } else{ $("button.createOrderButton").css("background-color","#AAAAAA"); $("button.createOrderButton").attr("disabled","disabled"); } } function syncSelect(){ var selectAll = true; $(".cartProductItemIfSelected").each(function(){ if("false"==$(this).attr("selectit")){ selectAll = false; } }); if(selectAll) $("img.selectAllItem").attr("src","https://how2j.cn/tmall/img/site/cartSelected.png"); else $("img.selectAllItem").attr("src","https://how2j.cn/tmall/img/site/cartNotSelected.png"); } function calcCartSumPriceAndNumber(){ var sum = 0; var totalNumber = 0; $("img.cartProductItemIfSelected[selectit='selectit']").each(function(){ var oiid = $(this).attr("oiid"); var price =$(".cartProductItemSmallSumPrice[oiid="+oiid+"]").text(); price = price.replace(/,/g, ""); price = price.replace(/¥/g, ""); sum += new Number(price); var num =$(".orderItemNumberSetting[oiid="+oiid+"]").val(); totalNumber += new Number(num); }); $("span.cartSumPrice").html("¥"+formatMoney(sum)); $("span.cartTitlePrice").html("¥"+formatMoney(sum)); $("span.cartSumNumber").html(totalNumber); } function syncPrice(pid,num,price){ $(".orderItemNumberSetting[pid="+pid+"]").val(num); var cartProductItemSmallSumPrice = formatMoney(num*price); $(".cartProductItemSmallSumPrice[pid="+pid+"]").html("¥"+cartProductItemSmallSumPrice); calcCartSumPriceAndNumber(); } </script>
增值内容,请先登录
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
步骤 4 :

选中一种商品

edit
增值内容,请先登录
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
$("img.cartProductItemIfSelected").click(function(){ var selectit = $(this).attr("selectit") if("selectit"==selectit){ $(this).attr("src","https://how2j.cn/tmall/img/site/cartNotSelected.png"); $(this).attr("selectit","false") $(this).parents("tr.cartProductItemTR").css("background-color","#fff"); } else{ $(this).attr("src","https://how2j.cn/tmall/img/site/cartSelected.png"); $(this).attr("selectit","selectit") $(this).parents("tr.cartProductItemTR").css("background-color","#FFF8E1"); } syncSelect(); syncCreateOrderButton(); calcCartSumPriceAndNumber(); });
$("img.cartProductItemIfSelected").click(function(){
    var selectit = $(this).attr("selectit")
    if("selectit"==selectit){
        $(this).attr("src","https://how2j.cn/tmall/img/site/cartNotSelected.png");
        $(this).attr("selectit","false")
        $(this).parents("tr.cartProductItemTR").css("background-color","#fff");
    }
    else{
        $(this).attr("src","https://how2j.cn/tmall/img/site/cartSelected.png");
        $(this).attr("selectit","selectit")
        $(this).parents("tr.cartProductItemTR").css("background-color","#FFF8E1");
    }
    syncSelect();
    syncCreateOrderButton();
    calcCartSumPriceAndNumber();
});
增值内容,请先登录
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
$("img.selectAllItem").click(function(){ var selectit = $(this).attr("selectit") if("selectit"==selectit){ $("img.selectAllItem").attr("src","https://how2j.cn/tmall/img/site/cartNotSelected.png"); $("img.selectAllItem").attr("selectit","false") $(".cartProductItemIfSelected").each(function(){ $(this).attr("src","https://how2j.cn/tmall/img/site/cartNotSelected.png"); $(this).attr("selectit","false"); $(this).parents("tr.cartProductItemTR").css("background-color","#fff"); }); } else{ $("img.selectAllItem").attr("src","https://how2j.cn/tmall/img/site/cartSelected.png"); $("img.selectAllItem").attr("selectit","selectit") $(".cartProductItemIfSelected").each(function(){ $(this).attr("src","https://how2j.cn/tmall/img/site/cartSelected.png"); $(this).attr("selectit","selectit"); $(this).parents("tr.cartProductItemTR").css("background-color","#FFF8E1"); }); } syncCreateOrderButton(); calcCartSumPriceAndNumber(); });
步骤 6 :

增加和减少数量

edit
增值内容,请先登录
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
$(".numberPlus").click(function(){ var pid=$(this).attr("pid"); var stock= $("span.orderItemStock[pid="+pid+"]").text(); var price= $("span.orderItemPromotePrice[pid="+pid+"]").text(); var num= $(".orderItemNumberSetting[pid="+pid+"]").val(); num++; if(num>stock) num = stock; syncPrice(pid,num,price); }); $(".numberMinus").click(function(){ var pid=$(this).attr("pid"); var stock= $("span.orderItemStock[pid="+pid+"]").text(); var price= $("span.orderItemPromotePrice[pid="+pid+"]").text(); var num= $(".orderItemNumberSetting[pid="+pid+"]").val(); --num; if(num<=0) num=1; syncPrice(pid,num,price); });
$(".numberPlus").click(function(){
    var pid=$(this).attr("pid");
    var stock= $("span.orderItemStock[pid="+pid+"]").text();
    var price= $("span.orderItemPromotePrice[pid="+pid+"]").text();
    var num= $(".orderItemNumberSetting[pid="+pid+"]").val();
    num++;
    if(num>stock)
        num = stock;
    syncPrice(pid,num,price);
});
$(".numberMinus").click(function(){
    var pid=$(this).attr("pid");
    var stock= $("span.orderItemStock[pid="+pid+"]").text();
    var price= $("span.orderItemPromotePrice[pid="+pid+"]").text();
    var num= $(".orderItemNumberSetting[pid="+pid+"]").val();
    --num;
    if(num<=0)
        num=1;
    syncPrice(pid,num,price);
});
步骤 7 :

直接修改数量

edit
增值内容,请先登录
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2020-03-14 感觉自己过一遍还是舒服
Lz2848509




我用的是bootstrap的勾,没有用图片,然后也没用千进制,其他的感觉差不多 ~
加载中
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>

<style>
body{
  font-size:12px;
  font-family:Arial;
}
div.pull-right{
  float:right !important;
}
div.cartDiv{
  max-width:1013px;
  margin:10px auto;
  color:black;
}
div.cartTitle button{
  background-color:#AAAAAA;
  border:1px solid #AAAAAA;
  width:53px;
  height:25px;
  border-radius:2px;
  color:white;
}
div.cartTitle span.cartTitlePrice{
  color:#C40000;
  font-size:14px;
  font-weight:bold;
  margin-right:3px;
  margin-left:5px;
}
div.cartDiv div.cartFoot{
  background-color:#E5E5E5;
  line-height:50px;
  margin:20px 0px;
  color:black;
  padding-left:20px;
}
div.cartFoot button{
  height:50px;
  color:white;
  background-color:#AAAAAA;
  border:1px solid #AAAAAA;
  font-size:18px;
  text-align:center;
  width:120px;
  
}
.clickTotal{
  cursor:pointer;
}
.clickOne{
  cursor:pointer;
}
.clickOne:hover{
  text-decoration:none;
}
div.cartFoot span.cartSumNumber{
  color:#C40000;
  font-weight:bold;
  font-size:16px;
  
}
div.cartFoot span.cartSumPrice{
  color:#C40000;
  font-weight:bold;
  font-size:20px;
  padding-top:7px;
  margin-right:3px;
}


div.cartProductlist table.cartProductTable{
  width:100%;
}
div.cartProductlist table.cartProductTable tr.cartProductTR{
  border:1px solid #CCCCCC;
}
div.cartProductlist table.cartProductTable tr.cartProductTR td{
  padding:20px 20px;
}
div.cartProductlist table.cartProductTable th{
  font-weight:normal;
  color:#333333;
  padding:20px 20px;
 
}
img.cartProductImg{
  width:80px;
  height:80px;
  padding:1px;
  border:1px solid #EEEEEE;
}
th.selectedAllImg{
  width:150px;
}
th.operation{
  width:80px;
}
div.cartProductLinkOutDiv a.cartProductLink{
  color:#333333;
}
div.cartProductLinkOutDiv a.cartProductLink:hover{
  color:#C40000;
}
div.cartProductLinkOutDiv div.someImages{
  padding-top:30px;
}
tr.cartProductTR div.prePrice{
  text-decoration:line-through;
  color:#9C9C9C;
  font-weight:bold;
  font-size:14px;
}
tr.cartProductTR div.discountPrice{
  color:#C40000;
  font-size:15px;
  font-weight:bold;
}
div.cartProudctChangeNumberDiv{
  border:1px solid #E5E5E5;
  width:85px;
}
div.cartProudctChangeNumberDiv a{
  display:inline-block;
  text-align:center;
  color:black;
  text-decoration:none;
  width:15px;
}
div.cartProudctChangeNumberDiv input{
  display:inline-block;
  width:43px;
}
span.cartProudctOneSumPrice{
  color:#C40000;
  font-size:15px;
  font-weight:bold;
}
.forTotal{
  color:#333333;
}
.forTotal:hover{
  text-decoration:none;
}
</style>
 
<script>
   function turnOrderButton(){
     var selectAny = false;
	 $(".cartProductItemIfSelected").each(function(){
	   if("true"==$(this).attr("selectit")){
	     selectAny = true;
	   }
   });
     if(selectAny){
     $("button.createOrderButton").css("background-color","#C40000");
	 $("button.createOrderButton").removeAttr("disabled");
    }	 
     else{
	 $("button.createOrderButton").css("background-color","#AAAAAA");
	 $("button.createOrderButton").attr("disabled","disabled");
	 }
   }
   
	
   function sumOneProductPrice(pid,num,price){
	    var sum = num*price;
		$(".cartProudctOneSumPrice[pid="+pid+"]").html("¥"+sum);
	   
	}
	
	function sumAllProcutPrice(){
	
	   var sum=0;
	   var totalNumber=0;
	 $("img.cartProductItemIfSelected[selectit='true']").each(function(){
       var oiid =$(this).attr("oiid");
       var price = $(".cartProudctOneSumPrice[oiid="+oiid+"]").text();
	   price = price.replace(/¥/g,"");
	   sum += new Number(price);
	   var num = $(".amountOfProduct[oiid="+oiid+"]").val();
	   totalNumber += new Number(num);   
});	 
	  
     $(".cartSumPrice").html("¥"+sum);
     $(".cartTitlePrice").html("¥"+sum);
	 $(".cartSumNumber").html(totalNumber);
	}
	
	$(function(){
    //增加商品数量
	  $(document).ready(function(){
	    $(".amountOfProduct").each(function(){
	    var pid = $(this).attr("pid");
		var price = $("span.prderItemPromotePrice[pid="+pid+"]").text();
	    var num = $(".amountOfProduct[pid="+pid+"]").val();
		sumOneProductPrice(pid,num,price);
		
	  });
	  });
	  
	  $(".numberAdd").click(function(){
	    var pid = $(this).attr("pid");
	    var stock = $("span.orderItemStock[pid="+pid+"]").text();
		var price = $("span.prderItemPromotePrice[pid="+pid+"]").text();
	    var num = $(".amountOfProduct[pid="+pid+"]").val();
		num++;
		if(num>stock){
		  num=stock;
		}
	    $(".amountOfProduct[pid="+pid+"]").val(num);
		sumOneProductPrice(pid,num,price);
		sumAllProcutPrice();
	  });
	 
	
	
	$(".numberMinus").click(function(){
	 //可以减0删除
	 var pid = $(this).attr("pid");
	 var oiid=$(this).attr("oiid");
	    var stock = $("span.orderItemStock[pid="+pid+"]").text();
		var price = $("span.prderItemPromotePrice[pid="+pid+"]").text();
	    var num = $(".amountOfProduct[pid="+pid+"]").val();
		num--;
		if(num==0){		
		$("tr.cartProductTR[oiid="+oiid+"]").hide();
		}
	    $(".amountOfProduct[pid="+pid+"]").val(num);
		sumOneProductPrice(pid,num,price);
		sumAllProcutPrice();
	  });
	 
	
	$(".amountOfProduct").keyup(function(){
	    var pid =$(this).attr("pid");
		var stock = $("span.orderItemStock[pid="+pid+"]").text();
		var price = $("span.prderItemPromotePrice[pid="+pid+"]").text();
	    var num = $(".amountOfProduct[pid="+pid+"]").val();
		num = parseInt(num);
		if(isNaN(num)){
		 num=1;}
	    if(num<0){
		 num=1;}
		if(num>stock){
	     num=stock;}
		 
		 $(".amountOfProduct[pid="+pid+"]").val(num);
		 sumOneProductPrice(pid,num,price);
		 sumAllProcutPrice();
		});
		
		
	$(".clickOne").click(function(){
		var oiid =$(this).attr("oiid");
		
		if("false"==$(".cartProductItemIfSelected[oiid="+oiid+"]").attr("selectit")){
		$("span.inner[oiid="+oiid+"]").show();
		$(".cartProductItemIfSelected[oiid="+oiid+"]").attr("selectit","true");
		$(".cartProductTR[oiid="+oiid+"]").css("background-color","#FFF8E1");
		turnOrderButton();
		}else{
		 $("span.inner[oiid="+oiid+"]").hide();
		 $(".cartProductItemIfSelected[oiid="+oiid+"]").attr("selectit","false");
		 $(".cartProductTR[oiid="+oiid+"]").css("background-color","white");
		 turnOrderButton();
		}
		sumAllProcutPrice();
		
	});
	
	
	$(".clickTotal").click(function(){
	   
     if("false"==$(".clickTotal").attr("select")){
      $("span.inner").show();
	  $(".cartProductItemIfSelected").attr("selectit","true");
	  $(".clickTotal").attr("select","true");
	  $(".cartProductTR").css("background-color","#FFF8E1");
      sumAllProcutPrice();
	  }
	  else{
	  $("span.inner").hide();
	  $(".cartProductItemIfSelected").attr("selectit","false");
	  $(".clickTotal").attr("select","false");
	  $(".cartProductTR").css("background-color","white");
	  $(".cartSumPrice").html("¥"+0);
      $(".cartTitlePrice").html("¥"+0);
	  }
     });
	 
	 $(".deleteProduct").click(function(){
	    var oiid=$(this).attr("oiid");
		$("tr.cartProductTR[oiid="+oiid+"]").hide();
	 
	 });
});
	
	
	
   
    
</script>

<div class="cartDiv">
 <div class="cartTitle pull-right">
   <span>已选商品(不含运费)</span>
   <span class="cartTitlePrice">¥0.00</span>
   <button class="createOrderButton" disabled="disabled">结算</span>
 </div>
 
 
 <div >
 <div class="cartProductlist">
  <table class="cartProductTable">
    <thead>
	  <tr>
	    <th class="selectedAllImg">
		<a class="clickTotal" select="false">
		<div style="position:relative" >
		<img src="https://how2j.cn/tmall/img/site/cartNotSelected.png"  ><span class="forTotal">全选</span>
		<span class="glyphicon glyphicon-ok inner"  style="position:absolute;top:4px;left:1px;display:none;color:#C40000"></span>
		</div>
		</a>
		</th>
		<th>商品信息</th>
		<th>单价</th>
		<th>数量</th>
		<th>金额</th>
		<th class="operation">操作</th>
	  </tr>
	</thead>
	<tbody>
	  <tr class="cartProductTR" oiid="936">
	   <td>
	   <a oiid="936" class="clickOne">
	   <div style="position:relative"  oiid="936">
	   <img  src="https://how2j.cn/tmall/img/site/cartNotSelected.png" selectit="false" class="cartProductItemIfSelected" oiid="936">
	   <span class="glyphicon glyphicon-ok inner" style="position:absolute;top:35px;left:1px;color:#C40000;display:none" oiid="936"></span>
	   <img width="40px" src="https://how2j.cn/tmall/img/productSingle_middle/3665.jpg" class="cartProductImg">
       </div>
	   </a>
	   </td>
	   <td>
	   <div class="cartProductLinkOutDiv">
	    <a class="cartProductLink" href="#nowhere">美国iRobot扫地机器人吸尘器全自动家用智能扫地机650 天猫电器城</a>
		<div class="someImages">
		 <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png">
		 <img title="消费者保障服务,7天无条件退货" src="https://how2j.cn/tmall/img/site/7day.png">
		 <img title="消费者保障服务,承诺如实描述"  src="https://how2j.cn/tmall/img/site/promise.png">
		</div>
	   </div>
	   </td>
	   <td>
	   <div class="prePrice">¥7580.0</div>
	   <div class="discountPrice">¥5306.0</div>
	   </td>
	   <td>
	   <div class="cartProudctChangeNumberDiv">
	   <span pid="365" class="hidden orderItemStock" >75</span>
	   <span pid="365" class="hidden prderItemPromotePrice">5306</span>
	   <a href="#nowhere" class="numberMinus" pid="365" oiid="936">-</a>
	   <input value="4" class="amountOfProduct" pid="365" oiid="936">
	   <a href="#nowhere" class="numberAdd" pid="365" stock="75">+</a>
	   </div>
	   </td>
	   <td>
	   <span pid="365" class="cartProudctOneSumPrice" oiid="936" >¥5306.00</span>
	
	   </td>
	   <td>
	    <a href="#nowhere" class="deleteProduct" oiid="936">删除</a>
	   </td>
	  </tr>
	  
	  <tr class="cartProductTR" oiid="935">
	   <td>
	   <a oiid="935" class="clickOne">
	   <div style="position:relative"  oiid="935">
	   <img  src="https://how2j.cn/tmall/img/site/cartNotSelected.png" selectit="false" class="cartProductItemIfSelected" oiid="935">
	   <span class="glyphicon glyphicon-ok inner" style="position:absolute;top:35px;left:1px;color:#C40000;display:none" oiid="935"></span>
	   <img width="40px" src="https://how2j.cn/tmall/img/productSingle_middle/8510.jpg" class="cartProductImg">
       </div>
	   </a>
	   </td>
	   <td>
	   <div class="cartProductLinkOutDiv">
	    <a class="cartProductLink" href="#nowhere">阔腿裤三件套装女夏装2016新款大码雪纺时尚休闲气质棉麻九分裤潮</a>
		<div class="someImages">
		 <img title="支持信用卡支付" src="https://how2j.cn/tmall/img/site/creditcard.png">
		 <img title="消费者保障服务,7天无条件退货" src="https://how2j.cn/tmall/img/site/7day.png">
		 <img title="消费者保障服务,承诺如实描述"  src="https://how2j.cn/tmall/img/site/promise.png">
		</div>
	   </div>
	   </td>
	   <td>
	   <div class="prePrice">¥235.0</div>
	   <div class="discountPrice">¥152.75</div>
	   </td>
	   <td>
	   <div class="cartProudctChangeNumberDiv">
	   <span pid="809" class="hidden orderItemStock" >17</span>
	   <span pid="809" class="hidden prderItemPromotePrice">152.75</span>
	   <a href="#nowhere" class="numberMinus" pid="809" oiid="935">-</a>
	   <input value="1" class="amountOfProduct" pid="809" oiid="935">
	   <a href="#nowhere" class="numberAdd" pid="809">+</a>
	   </div>
	   </td>
	   <td>
	   <span class="cartProudctOneSumPrice" pid="809" oiid="935">¥152.75</span>
	   </td>
	   <td>
	    <a href="#nowhere" class="deleteProduct" oiid="935">删除</a>
	   </td>
	  </tr>
	 </tbody>
	</table>
</div>
 </div>
 
 
 
 
 
 <div class="cartFoot">
   
   <div style="position:relative">
   <a class="clickTotal" select="false">
   <img src="https://how2j.cn/tmall/img/site/cartNotSelected.png" href="#nowhere" height="15px">
   <span class="glyphicon glyphicon-ok inner" style="position:absolute;top:20px;left:1px;display:none;color:#C40000"></span>
   <span class="forTotal">全选</span>
   </a>
   <div class="pull-right">
   <span>已选商品</span>
   <span class="cartSumNumber">0</span>
   <span>件</span>
   <span>合计(不含运费):</span>
   <span class="cartSumPrice">¥0.00</span>
   <button class="createOrderButton" disabled="disabled">结算</button>
   </div>
   </div>
 </div>
</div>

							


1 个答案

how2j
答案时间:2020-03-14
自己过一遍独自做出来是最舒服的,赞!



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2020-03-02 小建议
kira_




如果单个产品逐个选择导致的全选按钮被勾选的情况下,要点击两次全选按钮才能取消掉商品的全选。
function syncSelect(){
    var selectAll = true;
    $(".cartProductItemIfSelected").each(function(){
        if("false"==$(this).attr("selectit")){
            selectAll = false;
        }
    });
    if(selectAll){
        $("img.selectAllItem").attr("src","https://how2j.cn/tmall/img/site/cartSelected.png");
        $("img.selectAllItem").attr("selectit", "selectit"); //站长应该是漏了这一行哈哈
    }
    else
        $("img.selectAllItem").attr("src","https://how2j.cn/tmall/img/site/cartNotSelected.png");
}

							


1 个答案

how2j
答案时间:2020-03-03
好的,不错



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2020-02-10 请问老师$(".cartProductItemIfSelected[selectit='selectit']").each()
2020-01-15 自己写的js,许多和站长的不一样,顺便把删除操作也写上了,发上来请大家批评指正
2020-01-09 给绕晕了,为什么已选中状态就要切换图片为未选中状态呢


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 50 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 实践项目-天猫前端-交互 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 982790551
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图