商品价格筛选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js"></script>
<script src="bootstrap/bootstrap/js/jquery/2.0.0/jquery.min.js"></script>
<link href="bootstrap/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet" />
<script src="bootstrap/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
div.categoryPageDiv{
max-width: 1200px;
margin: 10px auto;
}
div.categorySortBar{
margin: 40px 20px 20px 20px;
background-color: #F9F9F9;
padding: 4px;
}
table.categorySortBarTable{
display: inline-block;
}
span.glyphicon{
font-size: 10px;
}
table.categorySortBarTable td{
height: 17px;
font-size: 12px;
border: 1px solid #CCCCCC;
padding: 3px;
}
table.categorySortBarTable
td.grayColum
{
background-color: lightgray;
}
table.categorySortBarTable td input{
height: 15px;
width: 200px;
border-width: 0px;
outline: none;
}
table.categorySortBarTable td a{
color: #999;
}
table.categorySortBarTable td a:hover{
color: #C40000;
}
table.categorySortBarTable td.PriceMinddleColum{
color: #CCCCCC;
width: 5px;
}
table.categorySortBarTable td:hover{
color: lightgray;
}
div.b3{
background-color: #F9F9F9;
padding: 4px;
margin-left: 190px;
width: 990px;
}
div.b3 table tr td a{
margin-left: 20px;
}
table.categorySortBarTable{
display: inline-block;
}
body{
font-size:12px ;
font-family: arial;
}
div.categoryPageDiv{
max-width: 1030px;
margin: 10px auto;
}
div.categoryProducts{
padding: 0px 20px 40px 20px;
}
div.productUnit{
width: 225px;
height: 450px;
border: 3px solid #FFFFFF;
background-color: white;
margin: 12px 5px;
float: left;
}
div.productUnit:hover{
border: 3px solid #C40000;
}
img.productImg{
width: 220px;
height:300px ;
}
span.productPrice{
font-size: 20px;
display: block;
scrollbar-3dlight-color: #cc00000;
padding-left: 4px;
}
a.productLink{
display: block;
height: 34px;
margin: 10px 0px;
color: #333333;
}
a.productLink:hover{
margin: 10px 0px;
color:#999999;
display: block;
text-decoration: underline;
}
a.tmallLink{
margin: 10px 0px;
color: #999999;
display: block;
text-decoration: underline;
}
div.productInfo{
border-top: 1px solid #EEEEEE;
color: #999999;
}
div.productInfo span.productReviewNumber{
font-weight: bold;
color: #b57c5b;
}
div.prodcut span.prodcutReviewNumber{
font-weight: bold;
color:cornflowerblue;
}
div.productInfo span.monthDeal,div.productInfo span.productReview{
display: inline-block;
width: 90px;
height: 20px;
padding-top:5px;
padding-left: 5px;
}
div.prodcutInfo span.wangwang{
padding-left: 3px;
}
span.productPrice{
color: #C40000;
}
.productDealNumber{
margin-left: 10px;
color: deepskyblue;
}
.productReview{
margin-left: 10px;
}
.productReviewNumber{
margin-left: 10px;
color: red;
}
</style>
</head>
<body>
<script>
$(function() {
//给两个输入框添加keyup事件
//因为要获取值，所以不能用keydown和keypress事件做监听
//因为这两个事件只能获取到我们按键点击之前的值
$("input.sortBarPrice").keyup(function(){
var num=$(this).val();
//然后获取数值，如果为空
//那么把所有的产品展示出来
if(num.length==0){
$("div.productUnit").show();
return;
}
//接着判断输入的值，是否是数字，如果不是数字，或者是负数就显示1
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();
//首先产品要有自定义属性price
if(!isNaN(begin)&&!isNaN(end)){
//隐藏所有的产品项
$("div.productUnit").hide();
//遍历每一个产品项
$("div.productUnit").each(function(){
var price=$(this).attr("price");
//产品的价格在开始和结束价格区间之内，我们把它显示出来
price = new Number(price);
if(price>=begin&&price<=end){
$(this).show();
}
})
}
})
})
</script>
<div class="categoryPageDiv">
<img src="img/72.jpg">
<div class="categorySortBar">
<table class="categorySortBarTable">
<tr>
<td class="grayColor"><a href="#">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td>
<td><a href="#">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td>
<td><a href="#">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td>
<td><a href="#">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td>
<td><a href="#">价格<span class="glyphicon glyphicon-arrow-down"></span></a></td>
</tr>
</table>
<table class="categorySortBarTable">
<td><input type="text" placeholder="请输入" class="sortBarPrice beginPrice"></td>
<td class="grayColum PriceMinddleColum"></td>
<td><input type="text" placeholder="请输入" class="sortBarPrice endPrice"></td>
</table>
</div>
</div>
<div class="categoryPageDiv">
<div class="categoryProducts">
<div class="productUnit" price="399.02">
<a href="#">
<img src="img/爱马仕.jpg" class="productImg" />
</a>
<span class="productPrice">
399.02
</span>
<a href="#" class="productLink">
【寻香礼遇】Hermes爱马仕橘彩星光女士香水 女士淡香持久 官方正品
</a>
<a href="#" class="tmallLink">天猫专卖</a>
<div class="show1 productInfo"></div>
<span class="monthDeal">月成交<span class="productDealNumber">17笔</span></span>
<span class="productReview">评价<span class="productReviewNumber">14</span></span>
</div>
<div class="productUnit" price="499.02">
<a href="#">
<img src="img/阿玛尼.jpg" width="300px" height="300px" class="productImg" />
</a>
<span class="productPrice">
499.02
</span>
<a href="#" class="productLink">
Armani/阿玛尼红管口红丝绒哑光唇釉405/214
</a>
<a href="#" class="tmallLink">天猫专卖</a>
<div class="show1 productInfo"></div>
<span class="monthDeal">月成交<span class="productDealNumber">17笔</span></span>
<span class="productReview">评价<span class="productReviewNumber">14</span></span>
</div>
<div class="productUnit" price="599.02">
<a href="#">
<img src="img/CREED.jpg" width="100px" height="100px" class="productImg" />
</a>
<span class="productPrice">
599.02
</span>
<a href="#" class="productLink">
官方正品】CREED银色山泉香水 清新海洋木香调香水50/100ml
</a>
<a href="#" class="tmallLink">天猫专卖</a>
<div class="show1 productInfo"></div>
<span class="monthDeal">月成交<span class="productDealNumber">17笔</span></span>
<span class="productReview">评价<span class="productReviewNumber">14</span></span>
</div>
<div class="productUnit" price="699.02">
<a href="#">
<img src="img/祖马龙.jpg" width="100px" height="100px" class="productImg" />
</a>
<span class="productPrice">
699.02
</span>
<a href="#" class="productLink">
祖马龙鼠尾草与海盐香水 清新Jo Malone London
</a>
<a href="#" class="tmallLink">天猫专卖</a>
<div class="show1 productInfo"></div>
<span class="monthDeal">月成交<span class="productDealNumber">17笔</span></span>
<span class="productReview">评价<span class="productReviewNumber">14</span></span>
<span class="wangwang">
<a href="#" class="wangwangLink">
<img src="wangwang.png" />
</a>
</span>
</div>
<div class="productUnit" price="799.02">
<a href="#">
<img src="img/CREED.jpg" width="100px" height="100px" class="productImg" />
</a>
<span class="productPrice">
799.02
</span>
<a href="#" class="productLink">
【官方正品】CREED银色山泉香水 清新海洋木香调香水50/100ml
</a>
<a href="#" class="tmallLink">天猫专卖</a>
<div class="show1 productInfo"></div>
<span class="monthDeal">月成交<span class="productDealNumber">17笔</span></span>
<span class="productReview">评价<span class="productReviewNumber">14</span></span>
</div>
<div class="productUnit" price="299.02">
<a href="#">
<img src="img/YSL.jpg" width="100px" height="100px" class="productImg" />
</a>
<span class="productPrice">
299.02
</span>
<a href="#" class="productLink">
YSL圣罗兰小金条细管口红 哑光新色1966红棕色21
</a>
<a href="#" class="tmallLink">天猫专卖</a>
<div class="show1 productInfo"></div>
<span class="monthDeal">月成交<span class="productDealNumber">17笔</span></span>
<span class="productReview">评价<span class="productReviewNumber">14</span></span>
<span class="wangwang">
<a href="#" class="wangwangLink">
<img src="wangwang.png" />
</a>
</span>
</div>
<div class="productUnit" price="199.02">
<a href="#">
<img src="img/纪梵希-1.jpg" width="100px" height="100px" class="productImg" />
</a>
<span class="productPrice">
199.02
</span>
<a href="#" class="productLink">
【会员节】GIVENCHY纪梵希小羊皮口红半哑光唇膏333 37 正红色
</a>
<a href="#" class="tmallLink">天猫专卖</a>
<div class="show1 productInfo"></div>
<span class="monthDeal">月成交<span class="productDealNumber">17笔</span></span>
<span class="productReview">评价<span class="productReviewNumber">14</span></span>
</div>
<div class="productUnit" price="999.02">
<a href="#">
<img src="img/雅诗兰黛.jpg" width="100px" height="100px" class="productImg" />
</a>
<span class="productPrice">
999.02
</span>
<a href="#" class="productLink">
雅诗兰黛口红倾慕哑光唇膏 333 红棕色666 丝绒哑光
</a>
<a href="#" class="tmallLink">天猫专卖</a>
<div class="show1 productInfo"></div>
<span class="monthDeal">月成交<span class="productDealNumber">17笔</span></span>
<span class="productReview">评价<span class="productReviewNumber">14</span></span>
</div>
</div>
</div>
</body>
</html>
效果图：
浙公网安备 33010602011771号