how2j.cn


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

步骤 1 : 效果   
步骤 2 : js代码讲解   

交互有两部分功能
1. 排序部分
排序功能,需要提交到服务器重新获取数据,这个就不属于js交互部分的内容了。
2. 价格区间
满足价格条件的产品都会列罗出来,比如输入开始价格输入200,结束价格输入500,就只会显示满足条件的产品,这个是用js做的,可以演示效果
运行效果
<!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> <script> $(function(){ $("input.sortBarPrice").keyup(function(){ var num= $(this).val(); if(num.length==0){ $("div.productUnit").show(); return; } num = parseInt(num); if(isNaN(num)) num= 1; if(num<=0) num = 1; $(this).val(num); var begin = $("input.beginPrice").val(); var end = $("input.endPrice").val(); if(!isNaN(begin) && !isNaN(end)){ $("div.productUnit").hide(); $("div.productUnit").each(function(){ var price = $(this).attr("price"); price = new Number(price); if(price<=end && price>=begin) $(this).show(); }); } }); }); </script> <style> div.categoryPageDiv{ max-width: 1013px; margin: 10px auto; } div.categorySortBar{ background-color: #FAF9F9; margin: 40px 20px 20px 20px; padding: 4px; } table.categorySortBarTable{ border-collapse: collapse; display:inline-block; } table.categorySortBarTable span.glyphicon{ font-size: 10px; } table.categorySortBarTable td{ height:17px; font-size:12px; border:1px solid #CCCCCC; padding:3px; } table.categorySortBarTable td.grayColumn{ background-color: #F1EDEC; } table.categorySortBarTable td a{ color: #806F66; } table.categorySortBarTable td a:hover{ color: #C40000; } table.categorySortBarTable input{ border-width: 0px; height: 17px; width: 50px; } table.categorySortBarTable td.priceMiddleColumn{ width: 5px; vertical-align: middle; color: #CCCCCC; } table.categorySortTable td:hover{ background-color: #F1EDEC; } body{ font-size: 12px; font-family: Arial; } div.categoryPageDiv{ max-width: 1013px; margin: 10px auto; } div.categoryProducts{ padding: 0px 20px 40px 20px; } div.productUnit{ width: 225px; height: 338px; border: 3px solid #fff; background-color: white; margin: 12px 5px; float: left; } div.productUnit:hover{ border:3px solid #C40000; } div.productUnitFrame{ border:1px solid #eee; height:100%; } div.productUnitFrame:hover{ border:1px solid #C40000; } div.productUnit img.productImage{ width: 100%; height: 190px; } div.productUnit span.productPrice{ font-size: 20px; color: #CC0000; display: block; padding-left: 4px; } div.productUnit a.productLink{ margin: 10px 0px; color: #333333; display: block; height:34px; } div.productUnit a.productLink:hover{ text-decoration: underline; color: #C40000; } div.productUnit a.tmallLink{ margin: 10px 0px; color: #999999; display: block; text-decoration: underline; } div.productUnit a.tmallLink:hover{ text-decoration: underline; color: #C40000; } div.productUnit div.productInfo{ border-top-width: 1px; border-top-style: solid; border-top-color: #EEEEEE; color:#999999; } div.productUnit span.productDealNumber{ font-weight: bold; color: #B57C5B; } div.productUnit span.productReview{ border-left-width: 1px; border-left-style: solid; border-left-color: #EEEEEE; border-right-width: 1px; border-right-style: solid; border-right-color: #EEEEEE; } div.productUnit span.productReviewNumber{ font-weight: bold; color: #3388BB; } div.productUnit span.monthDeal, div.productUnit span.productReview{ display: inline-block; width: 90px; height: 30px; padding-top: 5px; padding-left: 5px; } div.productUnit span.wangwang{ padding-left: 3px; } </style> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <div class="categoryPageDiv"> <img src="http://how2j.cn/tmall/img/category/72.jpg"> <div class="categorySortBar"> <table class="categorySortBarTable categorySortTable"> <tbody><tr> <td class="grayColumn"><a href="#nowhere">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">价格<span class="glyphicon glyphicon-resize-vertical"></span></a></td> </tr> </tbody></table> <table class="categorySortBarTable"> <tbody><tr> <td><input type="text" placeholder="请输入" class="sortBarPrice beginPrice"></td> <td class="grayColumn priceMiddleColumn">-</td> <td><input type="text" placeholder="请输入" class="sortBarPrice endPrice"></td> </tr> </tbody></table> </div> <div class="categoryProducts"> <div price="799.2" class="productUnit"> <div class="productUnitFrame"> <a href="#nowhere"> <img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/7058.jpg" class="productImage"> </a> <span class="productPrice">¥799.20</span> <a href="#nowhere" class="productLink"> MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮 </a> <a href="#nowhere" class="tmallLink">天猫专卖</a> <div class="show1 productInfo"> <span class="monthDeal ">月成交 <span class="productDealNumber">16笔</span></span> <span class="productReview">评价<span class="productReviewNumber">14</span></span> <span class="wangwang"> <a href="#nowhere" class="wangwanglink"> <img src="http://how2j.cn/tmall/img/site/wangwang.png"> </a> </span> </div> </div> </div> <div price="511.2" class="productUnit"> <div class="productUnitFrame"> <a href="#nowhere"> <img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/7047.jpg" class="productImage"> </a> <span class="productPrice">¥511.20</span> <a href="#nowhere" class="productLink"> 宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包 </a> <a href="#nowhere" class="tmallLink">天猫专卖</a> <div class="show1 productInfo"> <span class="monthDeal ">月成交 <span class="productDealNumber">49笔</span></span> <span class="productReview">评价<span class="productReviewNumber">18</span></span> <span class="wangwang"> <a href="#nowhere" class="wangwanglink"> <img src="http://how2j.cn/tmall/img/site/wangwang.png"> </a> </span> </div> </div> </div> <div price="448.2" class="productUnit"> <div class="productUnitFrame"> <a href="#nowhere"> <img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/7036.jpg" class="productImage"> </a> <span class="productPrice">¥448.20</span> <a href="#nowhere" class="productLink"> 唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮 </a> <a href="#nowhere" class="tmallLink">天猫专卖</a> <div class="show1 productInfo"> <span class="monthDeal ">月成交 <span class="productDealNumber">34笔</span></span> <span class="productReview">评价<span class="productReviewNumber">16</span></span> <span class="wangwang"> <a href="#nowhere" class="wangwanglink"> <img src="http://how2j.cn/tmall/img/site/wangwang.png"> </a> </span> </div> </div> </div> <div price="411.6" class="productUnit"> <div class="productUnitFrame"> <a href="#nowhere"> <img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/7025.jpg" class="productImage"> </a> <span class="productPrice">¥411.60</span> <a href="#nowhere" class="productLink"> 英伦邦纹男士手包牛皮大容量真皮手拿包手抓包双拉链商务正品软皮 </a> <a href="#nowhere" class="tmallLink">天猫专卖</a> <div class="show1 productInfo"> <span class="monthDeal ">月成交 <span class="productDealNumber">25笔</span></span> <span class="productReview">评价<span class="productReviewNumber">19</span></span> <span class="wangwang"> <a href="#nowhere" class="wangwanglink"> <img src="http://how2j.cn/tmall/img/site/wangwang.png"> </a> </span> </div> </div> </div> <div price="157.25" class="productUnit"> <div class="productUnitFrame"> <a href="#nowhere"> <img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/7014.jpg" class="productImage"> </a> <span class="productPrice">¥157.25</span> <a href="#nowhere" class="productLink"> 劳迪莱斯男士手包休闲手拿包牛皮大容量钱包男包软面小包包手抓包 </a> <a href="#nowhere" class="tmallLink">天猫专卖</a> <div class="show1 productInfo"> <span class="monthDeal ">月成交 <span class="productDealNumber">17笔</span></span> <span class="productReview">评价<span class="productReviewNumber">16</span></span> <span class="wangwang"> <a href="#nowhere" class="wangwanglink"> <img src="http://how2j.cn/tmall/img/site/wangwang.png"> </a> </span> </div> </div> </div> <div price="268.2" class="productUnit"> <div class="productUnitFrame"> <a href="#nowhere"> <img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/7003.jpg" class="productImage"> </a> <span class="productPrice">¥268.20</span> <a href="#nowhere" class="productLink"> 帕朗尼男士手拿包真皮手包商务休闲头层牛皮软牛皮大容量休闲钱包 </a> <a href="#nowhere" class="tmallLink">天猫专卖</a> <div class="show1 productInfo"> <span class="monthDeal ">月成交 <span class="productDealNumber">5笔</span></span> <span class="productReview">评价<span class="productReviewNumber">19</span></span> <span class="wangwang"> <a href="#nowhere" class="wangwanglink"> <img src="http://how2j.cn/tmall/img/site/wangwang.png"> </a> </span> </div> </div> </div> <div price="233.4" class="productUnit"> <div class="productUnitFrame"> <a href="#nowhere"> <img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/6992.jpg" class="productImage"> </a> <span class="productPrice">¥233.40</span> <a href="#nowhere" class="productLink"> 编织手包手拿包男信封大容量手抓包真皮韩版潮商务休闲牛皮男包 </a> <a href="#nowhere" class="tmallLink">天猫专卖</a> <div class="show1 productInfo"> <span class="monthDeal ">月成交 <span class="productDealNumber">8笔</span></span> <span class="productReview">评价<span class="productReviewNumber">19</span></span> <span class="wangwang"> <a href="#nowhere" class="wangwanglink"> <img src="http://how2j.cn/tmall/img/site/wangwang.png"> </a> </span> </div> </div> </div> <div price="952.0" class="productUnit"> <div class="productUnitFrame"> <a href="#nowhere"> <img width="100px" src="http://how2j.cn/tmall/img/productSingle_middle/6981.jpg" class="productImage"> </a> <span class="productPrice">¥952.00</span> <a href="#nowhere" class="productLink"> 犟牛男士手包真皮手拿包头层牛皮商务大容量手抓包软皮夹包信封包 </a> <a href="#nowhere" class="tmallLink">天猫专卖</a> <div class="show1 productInfo"> <span class="monthDeal ">月成交 <span class="productDealNumber">20笔</span></span> <span class="productReview">评价<span class="productReviewNumber">16</span></span> <span class="wangwang"> <a href="#nowhere" class="wangwanglink"> <img src="http://how2j.cn/tmall/img/site/wangwang.png"> </a> </span> </div> </div> </div> <div style="clear:both"></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,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
$("input.sortBarPrice").keyup(function(){ var num= $(this).val(); if(num.length==0){ $("div.productUnit").show(); return; } num = parseInt(num); if(isNaN(num)) num= 1; if(num<=0) num = 1; $(this).val(num); var begin = $("input.beginPrice").val(); var end = $("input.endPrice").val(); if(!isNaN(begin) && !isNaN(end)){ console.log(begin); console.log(end); $("div.productUnit").hide(); $("div.productUnit").each(function(){ var price = $(this).attr("price"); price = new Number(price); if(price<=end && price>=begin) $(this).show(); }); } });


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


问答区域    
2019-10-21 有个问题
zdz123___



js的第一个if语句里如果input里的值长度为0就会显示出所有的productUnit,为什么我输入价格区间后再把价格删掉就所有的都不显示呢,如何把价格删掉后让他们显示啊?
$(function(){
    $("input.sortBarPrice").keyup(function(){
        var num= $(this).val();
        if(num.length==0){
            $("div.productUnit").show();
            return;
        }
              
        num = parseInt(num);
        if(isNaN(num))
            num= 1;
        if(num<=0)
            num = 1;
        $(this).val(num);      
          
        var begin = $("input.beginPrice").val();
        var end = $("input.endPrice").val();
        if(!isNaN(begin) && !isNaN(end)){
            $("div.productUnit").hide();
            $("div.productUnit").each(function(){
                var price = $(this).attr("price");
                price = new Number(price);
                if(price<=end && price>=begin)
                    $(this).show();
            });
        }
          
    });
});

							


1 个答案

how2j 答案时间:2019-10-22
删掉之后, num 值 不一定是 "", 而是 null吧。 你把这个 num 值打印出来看看是什么呢



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





2019-06-12 if(!isNaN(begin) && !isNaN(end))
Ilqjx
只输入第一个input,此时isNaN(end)值为false,console.log()输出为空格,为什么isNaN(end)是false呢?




2 个答案

how2j 答案时间:2019-06-14
@jackpearson 说得对

jackpearson 答案时间:2019-06-12
!isNaN(end) 指当end不是nan类型时为真,空格是nan(非数值类型),所以是false



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




2019-06-12 if (!isNaN(begin) && !isNaN(end))
2019-04-28 在原有基础上添加了天猫的这个效果,可是效果不太对
2019-04-15 交互这里的有个判断有问题不知道是我的问题还是站长代码问题
2019-04-09 站长,请问这段代码跟那个判断代码是用来干什么的?
2019-01-18 在站长的基础上修改下交互,之前只输入最小值不能显示
2018-12-04 【价格区间】显示不出来
2018-12-04 【价格区间】为什么不会显示
2018-10-29 这里的return 作用不是太懂
2018-04-25 parseInt()函数真的需要吗?
2018-04-25 价格区间的input直接不让输入字符
2018-03-30 价格区间交互没有反应
2018-03-30 价格区间交互没有反应
2018-01-28 $("div.productUnit").hide(); 一定要隐藏后才能显示价格条件后的产品
2018-01-21 输入价格之后图片不显示 再次提问
2018-01-20 输入价格之后图片不显示
2017-12-22 if(!isNaN(begin) && !isNaN(end))
2017-12-12 价格筛选出问题了
2017-10-27 price = new Number(price)
2017-08-12 这里num不是被parseInt转换为数字了吗?
2017-08-11 price = new Number(price)这个若是去掉
2017-07-06 img.onload()函数是否省去
2017-07-06 each() 遍历后输出的对象问题
2017-07-05 遍历问题
2017-06-07 刷新并不会变回默认值-请输入
2017-05-26 class选择器
2017-05-26 this 和“” 取值的区别
2017-05-20 keyup局限
2017-04-18 $(this).val(num); 的作用?
2017-03-07 上面分类列表和排序价格两个页面。。/(ㄒoㄒ)/~~
2017-03-06 公共页面怎么引用的?
2017-02-19 思路是不是这样?
2017-02-18 price = new Number(price)




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

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

上传截图