how2j.cn


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

步骤 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="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> <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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2021-03-28 如何做到实时更新
香芋




就是说,在输入beginPrice后,下边的商品列表能够实时展示出来大于beginPrice的商品。 我这样做的似乎不太行,可能是我想简单了吧。。。
if (!isNaN(begin) && !isNaN(end)) {
                    $("div.productUnit").hide();
                    $("div.productUnit").each(function () {
                        let price = $(this).attr("price");
                        price = Number(price);
                        if (price <= end && price >= begin) {
                            $(this).show();
                        }
                    });
                }
                if (isNaN(begin) && !isNaN(end)) {
                    $("div.productUnit").hide();
                    $("div.productUnit").each(function () {
                        let price = $(this).attr("price");
                        price = Number(price);
                        if (price <= end) {
                            $(this).show();
                        }
                    });
                }
                if (!isNaN(begin) && isNaN(end)) {
                    $("div.productUnit").hide();
                    $("div.productUnit").each(function () {
                        let price = $(this).attr("price");
                        price = Number(price);
                        if (price >= begin) {
                            $(this).show();
                        }
                    });
                }

							


2 个答案

王羲之
答案时间:2021-05-03
这样不就行了?

how2j
答案时间:2021-04-03
现在不就是嘛,把结束价格修改成超级大就行了



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





2021-03-07 这样的价格处理逻辑可以吗?
YorihimeN




站长的价格处理逻辑我有点搞不明白,所以自己弄了一个,站长能帮忙看一下逻辑有没有问题吗?我的文档树和站长的稍微有点区别,商品列表的文档树在图片里,麻烦站长了。
加载中
// 通过价格控制商品显示
$("#startPrice,#endPrice").keyup(function () {
    // 输入框变化后获取初始价格和结束价格
    let minPriceValue = $("#startPrice").val()
    let maxPriceValue = $("#endPrice").val()
    // 将价格字符串转为数字
    let minP = parseInt(minPriceValue)
    let maxP = parseInt(maxPriceValue)
    // 如果开始价格为空、小于0或者不是一个数字,则使开始价格等于0
    if (minPriceValue.length==0||minP<0||isNaN(minP)) {
        minP=0
    }
    // 如果结束价格为空、小于0、不是一个数字或者小于开始价格,则将结束价格设置为MAX_VALUE
    if (maxPriceValue.length==0||maxP<0||isNaN(maxP)||maxP<minP) {
        maxP=Number.MAX_VALUE
    }
    // 隐藏所有的商品
    $(".productItem").hide()
    $(".productItem").each(function (index,element) {
        // 获取价格元素的内容并保留数字部分
        let value=element.children[0].children[1].childNodes[0].nodeValue.substring(1)
        // 将处于价格区间的商品的display设置为显示
        let price=new Number(value)
        if (price>=minP&&price<=maxP) {
            element.style.display="inline-block"
        }
    })
})

							


2 个答案

YorihimeN
答案时间:2021-03-10
【追问】 1. 在价格输入框发出按键弹起事件后,JavaScript获取最低价格输入框的文本minPriceValue和最高价格输入框的文本maxPriceValue 2. 然后将输入的文本转化为数字minP和maxP。 3. 如果最低价格minP的值为空、小于0或者不是一个数字,则将minP的值设置为0 4. 如果最高价格maxP的值为空、小于0、不是一个数字或者小于minP的值,则将maxP的值设置为Number.MAX_VALUE 5. 隐藏所有的商品 6. 遍历所有的商品项目,根据文档树取得商品项目中的价格元素,然后通过价格元素的childNodes[0].nodeValue取得文本元素 ¥200,然后截取字符串取得价格200 7. 将价格介于minP和maxP之间的元素设置为显示。

how2j
答案时间:2021-03-07
你的逻辑思路是什么呢,可以先说下吗?不然我直接看代码头也晕呢



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





2020-11-13 关于价格搜索对问题
2020-03-04 如果是用iframe怎么做
2019-11-28 站长,请问怎么实现价格的升降序啊,能看一下代码吗


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

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

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

上传截图