您的位置：首页 > Web前端 > JQuery

jquery实现多条件筛选

2018-03-06 00:00 239 查看

摘要: 模仿淘宝多条件筛选，简单用jquery实现。

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery多条件筛选</title>
</head>
<body>
<div id="wrap">
<ul class="select">
<li class="select-list">
<dl id="select1">
<dt>上装:</dt>
<dd class="select-all selected"><a href="#">全部</a></dd>
<dd><a href="#">羽绒服</a></dd>
<dd><a href="#">棉衣</a></dd>
<dd><a href="#">毛呢外套</a></dd>
<dd><a href="#">针织衫</a></dd>
<dd><a href="#">风衣</a></dd>
<dd><a href="#">卫衣</a></dd>
</dl>
</li>
<li class="select-list">
<dl id="select2">
<dt>裤装:</dt>
<dd class="select-all selected"><a href="#">全部</a></dd>
<dd><a href="#">牛仔裤</a></dd>
<dd><a href="#">打底裤</a></dd>
<dd><a href="#">休闲裤</a></dd>
<dd><a href="#">阔腿裤</a></dd>
<dd><a href="#">铅笔裤</a></dd>
</dl>
</li>
<li class="select-list">
<dl id="select3">
<dt>裙装:</dt>
<dd class="select-all selected"><a href="#">全部</a></dd>
<dd><a href="#">连衣裙</a></dd>
<dd><a href="#">半身裙</a></dd>
<dd><a href="#">蕾丝连衣裙</a></dd>
<dd><a href="#">雪纺连衣裙</a></dd>
</dl>
</li>
<li class="select-result">
<dl>
<dt>已选条件:</dt>
<dd class="select-no">暂时没有选择过滤条件</dd>
</dl>
</li>
</ul>
</div>
</body>
</html>

css代码：

*{margin:0;padding:0;list-style: none;}
body{font-size:12px;}
.select{width:50%;border:1px solid #ddd;margin:30px auto;border-radius:5px;padding:5px 10px;}
.select li{padding:10px 0 5px 100px}
.select .select-list{border-bottom:1px dashed #eee;}
.select dl{position:relative;line-height:24px;}
.select dl:after{content:" ";display:block;clear:both;height:0;overflow:hidden}
.select dt{width:100px;margin-bottom:5px;position:absolute;top:0;left:-100px;text-align:right;color:#666;height:24px;line-height:24px}
.select dd{float:left;display:inline;margin:0 0 5px 5px;}
.select a{display:inline-block;white-space:nowrap;height:24px;padding:0 10px;text-decoration:none;color:#039;border-radius:2px;}
.select a:hover{color:#f60;background-color:#f3edc2;}
.select .selected a{color:#fff;background-color:#f60;}
.select-result dt{font-weight:bold;}
.select-no{color:#999;}
.select .select-result a{padding-right:20px;background:#f60 url("close.gif") right 9px no-repeat;}
.select .select-result a:hover{background-position:right -15px;}

js代码:

$("#select1 dd").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
if($(this).hasClass("select-all")){
$("#selectA").remove();
}else{
var copyA = $(this).clone();
if($("#selectA").length > 0){
$("#selectA a").html($(this).text());
}else{
$(".select-result dl").append(copyA.attr("id","selectA"));
}
}
})
$("#select2 dd").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
if($(this).hasClass("select-all")){
$("#selectB").remove();
}else{
var copyB = $(this).clone();
if($("#selectB").length > 0){
$("#selectB a").html($(this).text());
}else{
$(".select-result dl").append(copyB.attr("id","selectB"));
}
}
})
$("#select3 dd").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
if($(this).hasClass("select-all")){
$("#selectC").remove();
}else{
var copyC = $(this).clone();
if($("#selectC").length > 0){
$("#selectC a").html($(this).text());
}else{
$(".select-result dl").append(copyC.attr("id","selectC"));
}
}
})
$("#selectA").live("click",function(){
$(this).remove();
$("#select1 .select-all").addClass("selected").siblings().removeClass("selected");
})
$("#selectB").live("click",function(){
$(this).remove();
$("#select2 .select-all").addClass("selected").siblings().removeClass("selected");
})
$("#selectC").live("click",function(){
$(this).remove();
$("#select3 .select-all").addClass("selected").siblings().removeClass("selected");
})
$(".select dd").live("click", function () {
if ($(".select-result dd").length > 1) {
$(".select-no").hide();
} else {
$(".select-no").show();
}
});

效果展示：

close.gif:

注意：

live():jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。

但是要注意live的使用版本，live方法在1.7中已经不建议使用，在1.9中删除了这个方法。并建议在以后的代码中使用on方法来替代。

on方法可以接受三个参数：事件名、触发选择器、事件函数。

需要特别注意的是：on方法中间的这个触发选择器就是你将要添加的HTML元素的类名、id或者元素名，使用它就可以实现live的效果。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 多条件筛选

相关文章推荐

新的分享

章节导航