这次使用 jquery 来实现一个仿京东商城 - 商品列表商品筛选的功能
一、html 代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class='container'>
<div class='filter'>
<span> 已选条件：</span>
<div class='itme'>
<!-- <a>
× <span> 惠普 </span>
</a> -->
</div>
</div>
<div class='store'>
<dl>
<dt> 品牌：</dt>
<dd><div><a> 全部 </a></div></dd>
<dd><div><a> 惠普(hp)</a></div></dd>
<dd><div><a> 联想(Lenovo)</a></div></dd>
<dd><div><a> 联想(ThinkPad)</a></div></dd>
<dd><div><a> 宏基(acer)</a></div></dd>
<dd><div><a> 华硕 </a></div></dd>
<dd><div><a> 戴尔 </a></div></dd>
<dd><div><a> 三星 </a></div></dd>
<dd><div><a> 索尼 </a></div></dd>
<dd><div><a> 东芝 </a></div></dd>
<dd><div><a>Gateway</a></div></dd>
<dd><div><a> 微星 </a></div></dd>
<dd><div><a> 海尔 </a></div></dd>
<dd><div><a> 清华同方 </a></div></dd>
<dd><div><a> 富士通 </a></div></dd>
<dd><div><a> 苹果(Apple)</a></div></dd>
<dd><div><a> 神舟 </a></div></dd>
<dd><div><a> 方正 </a></div></dd>
<dd><div><a> 优雅 </a></div></dd>
</dl>
<dl>
<dt> 价格：</dt>
<dd><div><a> 全部 </a></div></dd>
<dd><div><a>1000-2999</a></div></dd>
<dd><div><a>3000-3499</a></div></dd>
<dd><div><a>3500-3999</a></div></dd>
<dd><div><a>4000-4499</a></div></dd>
<dd><div><a>4500-4999</a></div></dd>
<dd><div><a>5000-5999</a></div></dd>
<dd><div><a>6000-6999</a></div></dd>
<dd><div><a>7000-9999</a></div></dd>
<dd><div><a>10000 以上 </a></div></dd>
</dl>
<dl>
<dt> 尺寸：</dt>
<dd><div><a> 全部 </a></div></dd>
<dd><div><a>8.9 英寸及以下 </a></div></dd>
<dd><div><a>11 英寸 </a></div></dd>
<dd><div><a>12 英寸 </a></div></dd>
<dd><div><a>13 英寸 </a></div></dd>
<dd><div><a>14 英寸 </a></div></dd>
<dd><div><a>15 英寸 </a></div></dd>
<dd><div><a>16 英寸 -17 英寸 </a></div></dd>
</dl>
<dl>
<dt> 平台：</dt>
<dd><div><a> 全部 </a></div></dd>
<dd><div><a>AMD Brazos APU 平台 </a></div></dd>
<dd><div><a>Intel Sandy Bridge 平台 </a></div></dd>
<dd><div><a>Intel 平台 </a></div></dd>
<dd><div><a>AMD 平台 </a></div></dd>
</dl>
<dl>
<dt> 显卡：</dt>
<dd><div><a> 全部 </a></div></dd>
<dd><div><a> 独立显卡 </a></div></dd>
<dd><div><a> 集成显卡 </a></div></dd>
<dd><div><a> 核芯显卡 </a></div></dd>
</dl>
</div>
</div>
<script type="text/javascript" src='js/jquery-1.10.2.min.js'></script>
<script type="text/javascript">
var arr = [];
$(function(){$(".store dt+dd a").attr("class",'all-color');
$(".store a").click(function(){$(this).parents("dl").children('dd').each(function(){$(this).children('div').children('a').removeClass("all-color")
})
$(this).attr("class",'all-color');
$(this).parentsUntil("dl").parent().hide();
arr.push($(this));
var val = $(this).html();
var domItem = `<a
onclick=deletes('${val}')
rel='${val}'
>
× <span>${val}</span>
</a>`;
$(".itme").append(domItem);
})
})
function deletes(val){$(".filter").find("a[rel='"+val+"']").remove();
for(var i=0;i<arr.length;i++){if(arr[i].html() == val){arr[i].parentsUntil("dl").parent().show();
arr.splice(i,1);
i--;
}else{arr[i].parentsUntil("dl").parent().hide();
}
}
}
</script>
</body>
</html>
二、css 代码
*{margin:0;padding:0;}
ul{list-style: none;}
a{text-decoration: none;cursor:pointer;}
.container{
width:720px;
margin:20px auto 0 auto;
border-width: 2px 1px 0 1px;
border-color: #ff5500 #ccc #ccc #ccc;
border-style:solid;
}
.filter{
padding:10px 0 10px 36px;
background: #f2f2f2;
border-bottom:1px solid #ccc;
font-size:14px;
display: flex;
}
.itme{margin-left:10px;}
.itme a{
padding:0 10px;
margin:0 5px;
border:1px solid #ff5500;
border-radius: 5px;
background: #fff;
color:red;
}
.store dl{
padding: 0 0 15px 110px;
border-bottom: 1px solid #ccc;
display: flex;
flex-wrap: wrap;
font-size:12px;
}
.store dl dt{
width:110px;
margin:15px 0 0 -110px;
text-align: right;
line-height: 16px;
font-size:14px;
color:#404040;
font-weight: bold;
}
.store dl dd{margin:12px 18px 0 0;}
.all-color{
background: blue;
color:#fff;
}
每日分享文章 - 附带视频教程：https://www.3mooc.com/front/a…