how2j.cn


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

步骤 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="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://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","http://how2j.cn/tmall/img/site/cartNotSelected.png"); $(this).attr("selectit","false") $(this).parents("tr.cartProductItemTR").css("background-color","#fff"); } else{ $(this).attr("src","http://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","http://how2j.cn/tmall/img/site/cartNotSelected.png"); $("img.selectAllItem").attr("selectit","false") $(".cartProductItemIfSelected").each(function(){ $(this).attr("src","http://how2j.cn/tmall/img/site/cartNotSelected.png"); $(this).attr("selectit","false"); $(this).parents("tr.cartProductItemTR").css("background-color","#fff"); }); } else{ $("img.selectAllItem").attr("src","http://how2j.cn/tmall/img/site/cartSelected.png"); $("img.selectAllItem").attr("selectit","selectit") $(".cartProductItemIfSelected").each(function(){ $(this).attr("src","http://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","http://how2j.cn/tmall/img/site/cartSelected.png"); else $("img.selectAllItem").attr("src","http://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="http://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="http://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="936" selectit="false"> <a href="#nowhere" style="display:none"><img src="http://how2j.cn/tmall/img/site/cartSelected.png"></a> <img src="http://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="http://how2j.cn/tmall/img/site/creditcard.png"> <img title="消费者保障服务,承诺7天退货" src="http://how2j.cn/tmall/img/site/7day.png"> <img title="消费者保障服务,承诺如实描述" src="http://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="http://how2j.cn/tmall/img/site/cartNotSelected.png" class="cartProductItemIfSelected" oiid="935" selectit="false"> <a href="#nowhere" style="display:none"><img src="http://how2j.cn/tmall/img/site/cartSelected.png"></a> <img src="http://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="http://how2j.cn/tmall/img/site/creditcard.png"> <img title="消费者保障服务,承诺7天退货" src="http://how2j.cn/tmall/img/site/7day.png"> <img title="消费者保障服务,承诺如实描述" src="http://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="http://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","http://how2j.cn/tmall/img/site/cartSelected.png"); else $("img.selectAllItem").attr("src","http://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","http://how2j.cn/tmall/img/site/cartNotSelected.png"); $(this).attr("selectit","false") $(this).parents("tr.cartProductItemTR").css("background-color","#fff"); } else{ $(this).attr("src","http://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","http://how2j.cn/tmall/img/site/cartNotSelected.png");
        $(this).attr("selectit","false")
        $(this).parents("tr.cartProductItemTR").css("background-color","#fff");
    }
    else{
        $(this).attr("src","http://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","http://how2j.cn/tmall/img/site/cartNotSelected.png"); $("img.selectAllItem").attr("selectit","false") $(".cartProductItemIfSelected").each(function(){ $(this).attr("src","http://how2j.cn/tmall/img/site/cartNotSelected.png"); $(this).attr("selectit","false"); $(this).parents("tr.cartProductItemTR").css("background-color","#fff"); }); } else{ $("img.selectAllItem").attr("src","http://how2j.cn/tmall/img/site/cartSelected.png"); $("img.selectAllItem").attr("selectit","selectit") $(".cartProductItemIfSelected").each(function(){ $(this).attr("src","http://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公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2019-10-08 sign和cents不需要定义吗
Hum0r0
同上




1 个答案

how2j 答案时间:2019-10-09
在前端的javascript 变量这个章节有提到,变量可以不用 var 来定义,也可以直接使用哈: http://how2j.cn/k/javascript/javascript-variable/427.html#step1073



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




2019-10-06 关于 if("selectit"==$(this).attr("selectit"))的问题
超级大哈克
不太明白这句代码是什么意思 if("selectit"==$(this).attr("selectit")),请站长指教




1 个答案

how2j 答案时间:2019-10-06
获取当前元素的自定义属性 "selectit"的值,看这个值是否等于字符串: "selectit"



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




2019-08-21 if("selectit"==selectit)有很大疑惑????
2019-08-20 属性选择器问题
2019-08-18 不理解parents的用法
2019-07-30 结算问题
2019-07-26 站长请认真,并且用心去做
2019-07-23 关于how2java这个网站里的搜索框的搜索问题
2019-07-22 关于搜索功能关键字的问题
2019-05-18 关于搜索里无法使用 jquery css 这样的关键词搜索,搜索无结果,但是站长的视频里却可以这样搜索,很奇怪?
2019-03-17 我自己把所有的交互效果做出来啦
2019-03-06 关于全选的一个小BUG
2019-02-20 html和css不想手敲,怎么办
2019-02-17 站长如果图片不进行预加载会出现什么
2018-12-12 站长能讲一下 JQuery 里的css 和 attr有什么区别吗
2018-11-26 请问为什么要设定两个总价的class呢? cartTitlePrice 和 cartTitlePrice
2018-09-14 千进制格式化金额理解
2018-07-13 站长能给这段格式化金额的代码注释一下吗? 看不懂
2018-06-29 我这样写可以吗
2018-03-31 请问老师这里为什么不是等于“true”,而是等于“selectit”啊?代码中明明selectit属性的值只有false和true两种啊
2018-03-23 关于cartFoot button css
2018-03-06 关于变量拼接的问题,站主你真的有必要出来说一下
2018-03-06 关于num++和++num的问题!
2018-03-06 关于num++和++num的问题!
2018-03-06 关于num++和++num的问题!
2018-03-04 求助站长 总价变成undefined了
2018-02-03 老师,关于全选、商品的勾选框,用checkbox实现不是更好吗
2018-01-26 第一个增加或减少数量,总金额没有变化,但是第二个增加或减少就有变化的
2017-12-11 公共函数数字处理问题
2017-12-07 这个模式匹配是做什么用的
2017-11-14 从元素中获取的值 返回类型不是都是字符串吗 为何 能直接++ 或者-- 或者作比较呢
2017-11-10 关于[oiid="+oiid+"]的引号问题
2017-11-08 关于substring
2017-09-30 购物车第一列和最后一列尺寸问题
2017-08-23 代码一模一样,为什么我的界面会这样??????
2017-08-18 关于获取元素属性值
2017-08-17 删除商品
2017-08-17 和老师代码一样,不知道为什么运行不起
2017-07-09 公共函数调用位置方的不同
2017-07-05 可以通过触发点击事件实现全选
2017-05-29 ”selectit“==slectit 这个不明白
2017-05-27 有行代码不清楚
2017-05-25 结算按钮实现差异
2017-05-24 结算按钮实现差异
2017-05-24 函数参数问题
2017-05-22 foreServlet中找不到"forechangeOrderItem"这个方法??
2017-05-18 设置高亮语法
2017-05-01 交互功能延伸的问题
2017-04-20 删除功能的怎么实现(补充说明)
2017-04-20 删除功能的怎么实现
2017-03-30 选中商品后,结算按钮,已选商品的价格和数量不会响应
2017-03-29 感觉跟老师写的一模一样但是就是没有效果,找不到原因。。。
2016-12-19 购物车结算问题
2016-12-19 购物车结算问题
2016-11-30 同步商品价格问题
2016-11-29 if条件判断语句
2016-11-01 请问老师,num = new Number(num) 和 num = parseInt(num) 具体有什么区别?




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

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

上传截图