商品列表属性过滤
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>.html</title>
<style>
*{margin:0;padding:0;}
.sort{width:50%;margin:20px auto;overflow: :auto;}
a{text-decoration:none}
dl:after{content:" ";display:block;clear:both;height:0;overflow:hidden}
dt,dd{float:left;margin-top:5px;}
a{display:inline-block;padding:2px 15px 2px 5px;margin:0 2px;color:#039;}
.selected{background:#f60 url(images/close_01.png)no-repeat right top;color:#fff;}
.have{font-weight:bold;}
.select_no{color:#999;}
</style>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
$(".sort1 dd a").click(function(){ //在dl上点击，被点击的a元素增加class样式，同时通过它的父级寻找其它兄弟元素，在里面的a元素修改他们的class样式
$(this).addClass("selected").parent().siblings("dd").find("a").removeClass("selected");
var obj=$(this).clone(); //把被点击的元素复制一份，追加到最后一个dl里面，但是追加之前是有条件的，要进行判断
if($(this).hasClass("select_all")){ //如果被点击的是“全部”，就不能追加，那么就要把它删除掉
$("#selectA").remove();
}else{ //否则就追加
if($(".result").find("#selectA").length>0){ 但是在追加之前，要把前面追加的选项先删除掉，因为一个组只能选择一项
$("#selectA").remove();
}
$(".result dd").append(obj.attr("id","selectA")); //追加的时候顺便给它命名，设置一个id属性，方便对它进行操作
}
});
$(".sort1 dd a").live("click",function(){ //同时还要进行另一个判断，就是如果最后一个dl里面已经追加了，那么就把原来的“没有选择……”隐藏起来，否则显示。
if($(".result dd").children().length>1){
$(".select_no").hide();
}else{
$(".select_no").show();
}
});
第二、第三组同理：
$(".sort2 dd a").click(function(){
$(this).addClass("selected").parent().siblings("dd").find("a").removeClass("selected");
var obj=$(this).clone();
if($(this).hasClass("select_all")){
$("#selectB").remove();
}else{
if($(".result").find("#selectB").length>0){
$("#selectB").remove();
}
$(".result dd").append(obj.attr("id","selectB"));
}
});
$(".sort2 dd a").live("click",function(){
if($(".result dd").children().length>1){
$(".select_no").hide();
}else{
$(".select_no").show();
}
});
$(".sort3 dd a").click(function(){
$(this).addClass("selected").parent().siblings("dd").find("a").removeClass("selected");
var obj=$(this).clone();
if($(this).hasClass("select_all")){
$("#selectC").remove();
}else{
if($(".result").find("#selectC").length>0){
$("#selectC").remove();
}
$(".result dd").append(obj.attr("id","selectC"));
}
});
$(".sort3 dd a").live("click",function(){
if($(".result dd").children().length>1){
$(".select_no").hide();
}else{
$(".select_no").show();
}
});
当我在最后一个dl上点击某个选项的时候，就要把它删除，同时让“全部”增加class样式，其它兄弟class样式删除
$("#selectA").live("click",function(){
$(this).remove();
$(".sort1 .select_all").addClass("selected").parent().siblings("dd").find("a").removeClass("selected");
});
$("#selectB").live("click",function(){
$(this).remove();
$(".sort2 .select_all").addClass("selected").parent().siblings("dd").find("a").removeClass("selected");
});
$("#selectC").live("click",function(){
$(this).remove();
$(".sort3 .select_all").addClass("selected").parent().siblings("dd").find("a").removeClass("selected");
});
});
</script>
</head>
<body>
<div class="sort">
<dl class="sort1">
<dt>上装：</dt>
<dd ><a href="javascript:;" class="select_all selected">全部</a></dd>
<dd><a href="javascript:;">针织衫</a></dd>
<dd><a href="javascript:;">毛呢外套</a></dd>
<dd><a href="javascript:;">T恤</a></dd>
<dd><a href="javascript:;">羽绒服</a></dd>
<dd><a href="javascript:;">棉衣</a></dd>
<dd><a href="javascript:;">卫衣</a></dd>
<dd><a href="javascript:;">风衣</a></dd>
</dl>
<dl class="sort2">
<dt>裤装：</dt>
<dd><a href="javascript:;" class="select_all selected">全部</a></dd>
<dd><a href="javascript:;">牛仔裤</a></dd>
<dd><a href="javascript:;">小脚铅笔裤</a></dd>
<dd><a href="javascript:;">休闲裤</a></dd>
<dd><a href="javascript:;">打底裤</a></dd>
<dd><a href="javascript:;">哈伦裤</a></dd>
</dl>
<dl class="sort3">
<dt>裙装：</dt>
<dd><a href="javascript:;" class="select_all selected">全部</a></dd>
<dd><a href="javascript:;">连衣裙</a></dd>
<dd><a href="javascript:;">半身裙</a></dd>
<dd><a href="javascript:;">长袖连衣裙</a></dd>
<dd><a href="javascript:;">中长袖连衣裙</a></dd>
</dl>
<dl class="result">
<dt class="have">已选条件：</dt>
<dd><span class="select_no">暂时没有选择过滤条件</span></dd>
</dl>
</div>
</body>
</html>
1 .addClass();添加的是class的名称，
.addClass(".box")(×) .addClass("box a")(×) .addClass("box") (√)
2 <a href=""></a>,链接不能为空，如果没有链接地址，则写为<a href="javascript:;"></a>
3 善于通过某个元素寻找它父级.parent()、子元素.children() 、兄弟.siblings()、前一个.prev()、后一个.next()、某个范围内的元素.slice(1,4)
4 .live()可以为动态增加的节点绑定事件，而.on只能为原来页面上就存在的节点绑定事件。
