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-06-03 删除模态框在哪??
xuao

删除模态框在哪??




1 个答案

how2j
答案时间:2020-06-04
这里就没有提供了,在整站里才有提供



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




2020-04-27 if("selectit"==$(this).attr("selectit"))
我q146




if("selectit"==$(this).attr("selectit")),这一步还是不理解。$(this).attr("selectit")这个返回的不是一个属性值吗?怎么和一个字符串比较呢?
 $(".cartProductItemIfSelected").each(function(){
        if("selectit"==$(this).attr("selectit")){
            selectAny = true;
        }
    });

							


3 个答案

how2j
答案时间:2020-04-30
嗯呢,就是通过比较字符串来判断是否为 true

我q146
答案时间:2020-04-27
o,看了后面一些代码,$(this).attr("selectit","selectit"),这一行,就把属性值给改了,然后结和if("selectit"==$(this).attr("selectit"))就等于true了。这样理解对吗?

how2j
答案时间:2020-04-27
返回的属性值是个字符串, 而这个字符串就有可能是 "selectit" 呀



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





2020-03-14 感觉自己过一遍还是舒服
2020-03-02 小建议
2020-02-10 请问老师$(".cartProductItemIfSelected[selectit='selectit']").each()


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

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

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

上传截图