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


问答区域    
2020-03-04 如果是用iframe怎么做
wuxianbiao




用ifram导入(导入的是下面图片的那部分),达不到要的效果。怎么办?麻烦看看哪里错了(连alter(1)都显示不出来是为什么)。input这是输入价格的;input.style3和input.style6分别是左右两边的输入框;price是每个图片中的价格。
<script>
$(function(){
$("input").keyup(function(){
alter(1);
var min = $(this.style3).val();
min = parseFloat(min)
var max = $(this.style6).val();
max = parseFloat(max)
$(#iframe span.style1).each(function(){
var num1 =$(this).attr("price");
num1=parseFloat(num1);
if(num1<min || num1>max){
$("#iframe span.style1").hide();
}
});
});
});
</script>

							


1 个答案

how2j
答案时间:2020-03-05
$(#iframe span.style1) 这样的方式是拿不到 iframe 里的元素的,要怎么拿,好好百度一下,技术上颇为麻烦



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





2019-11-28 站长,请问怎么实现价格的升降序啊,能看一下代码吗
小周yyuu

求代码




1 个答案

how2j
答案时间:2019-11-29
升降序在服务端做的,要在天猫整站项目里才看得到哦。



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




2019-10-21 有个问题
2019-06-12 if(!isNaN(begin) && !isNaN(end))
2019-04-28 在原有基础上添加了天猫的这个效果,可是效果不太对


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

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

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

上传截图