码迷,mamicode.com
首页 > 其他好文 > 详细

商品列表属性过滤

时间:2016-10-29 19:37:28      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:没有   style   char   dcl   box   nbsp   删除   样式   操作   

<!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只能为原来页面上就存在的节点绑定事件。

商品列表属性过滤

标签:没有   style   char   dcl   box   nbsp   删除   样式   操作   

原文地址:http://www.cnblogs.com/annie211/p/6011486.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!