淘宝筛选效果
jQuery学完简单制作几个小项目
实现一个筛选菜单的效果
最终效果
需求
1.点击后要加入筛选栏，且每一个种类只能选择一个
2.再次点击已筛选的标签，会被取消选中，并返回“全部”标签
3.点击已筛选中的标签，可以删除标签，并将上方对应的恢复为“全部”，当上方点击全部时，也要删除下方对应的标签
4.在下方没有选择标签时，要显示“暂无选择的标签”
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.filter-list>div {
display: flex;
margin-bottom: 50px;
}
.wrap {
width: 1200px;
margin: auto;
border: 2px gray solid;
border-radius: 2px;
margin-top: 100px;
padding: 20px 0;
}
.filter-list>div>p {
margin-left: 20px;
}
.filter-list>div>p:not(.title, .text) {
color: #436EEE
}
.filter-list>div>p:not(.title, .text, .marked):hover {
background-color: rgba(246, 203, 144, 0.5);
color: #EE9A00
}
p {
padding: 10px;
}
.marked {
color: white;
background-color: #EE7600
}
</style>
</head>
<body>
<div class="wrap">
<div class="filter-list">
<div class="clothes">
<p class="title">上装：</p>
<p class="all" id="all">全部</p>
<p>针织衫</p>
<p>毛衣外套</p>
<p>T恤</p>
<p>羽绒服</p>
<p>棉衣</p>
<p>卫衣</p>
<p>风衣</p>
</div>
<div class="pants">
<p class="title">裤装：</p>
<p class="all" id="all">全部</p>
<p>牛仔裤</p>
<p>小脚/铅笔裤</p>
<p>休闲裤</p>
<p>打底裤</p>
<p>哈伦裤</p>
</div>
<div class="skirts">
<p class="title">裙装：</p>
<p class="all" id="all">全部</p>
<p>连衣裙</p>
<p>半身裙</p>
<p>长袖连衣裙</p>
<p>中长款连衣裙</p>
</div>
<div class="select">
<p class="title" style="font-weight:bold">已选条件：</p>
<p class="text">暂时没有过滤条件</p>
</div>
</div>
</div>
<script>
var addSelect = function (selector) {
$(selector).addClass("temp");
$(selector).clone().appendTo(".select");
$(selector).removeClass("temp");
var kind = $(selector).parent().attr("class");
$(".temp").addClass(kind).append(" x").click(function () {
//将上面的恢复成全部
$("." + kind).children().removeClass("marked");
$("." + kind).children(".all").addClass("marked");
//删除这个class
$(this).remove();
//如果select子集长度为2,则恢复“暂时没有过滤条件”
if ($(".select").children().length === 2) {
$(".text").css("display", "block");
}
}).removeClass("temp");
}
var mark = function (selector) {
$(selector).addClass("marked");
}
var delForList = function (selector) {
var kind = $(selector).parent().attr("class");
$(".select").children("." + kind).remove();
}
mark(".all");
$("p:not('.title')").click(function () {
//检查除了点击元素外是否有其他同级标签被做过标记
if ($(this).siblings(".marked").length != 0) {
//如果有，则删除标记
$(this).siblings(".marked").removeClass("marked");
//并删除在过滤条件里的对应元素
delForList(this);
}
//如果点的不是all
if ($(this).attr("id")!="all") {
//检查点击的是否为被标记的元素
reg = /marked/;
if (reg.test($(this).attr("class"))) {
//取消标记
$(this).removeClass("marked");
//并删除在过滤条件里的对应元素
delForList(this);
//将全部选项高亮
$(this).siblings(".all").addClass("marked");
} else {
//做标记
mark(this);
//加入已选
addSelect(this);
//去掉“暂时没有过滤条件”
$(".text").css("display", "none");
}
} else {
//如果为all则清空本列所有标记并清空列表中对应元素
$(this).siblings("marked").removeClass("marked");
$(this).addClass("marked");
delForList(this);
}
//如果select子集长度为2,则恢复“暂时没有过滤条件”
if ($(".select").children().length === 2) {
$(".text").css("display", "block");
}
});
</script>
</body>
</html>