<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="./CS/common.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
li {
list-style-type: none;
}
.l {
float: left;
}
.r {
float: right;
}
.c:after {
clear: both;
width: 0;
height: 0;
font-size: 0;
content: "";
display: block;
visibility: hidden;
}
body {
font-size: 12px;
}
body .wrap {
margin: auto;
}
.active {
background: #FF5722;
color: #fff!important;
box-shadow: 1px 1px 3px orange;
}
#head .wrap {
width: 600px;
height: 300px;
border: 1px solid #aaa;
padding: 0px 10px;
}
.wrap ul li {
padding: 10px 0px;
border-bottom: 1px dotted #aaa;
}
.wrap ul li span {
display: inline-block;
color: blue;
}
.wrap ul li span:nth-of-type(1) {
width: 100px;
text-align: right;
color: #aaa;
}
.wrap ul li span:nth-of-type(1)~span {
padding: 3px 5px;
margin: 0px 5px;
}
.condition {
padding: 10px 0px;
}
.condition div {
display: inline-block;
text-align: right;
padding: 3px 5px;
margin-right: 10px;
}
.condition div:first-of-type {
width: 100px;
}
.condition div span:first-of-type {
margin-right: 5px;
}
</style>
<!-- <script src="../jquery-1.7.2/jquery.js"></script>
<script>
$(document).ready(function () {
$(".wrap ul li").each(function (i) {
$(".wrap ul li").eq(i).children("span").each(function (k) {
$(this).click(function () {
//给当前元素添加样式，其他兄弟删除样式
$(this).addClass("activeColor").siblings().removeClass("activeColor");
//记录是哪一行li[i是li的索引，是唯一标识]
var choice = ".choice" + (i + 1);
//删除已存在的元素
$(choice).remove();
//全部的索引是1，点击全部时，1>1 返回false，不添加元素
if (k > 1) {
//添加元素
var div = "<div class='choice" + (i + 1) + " activeColor'><span>" + $(this).clone().html() + "</span><span class='deleteBtn'>" + "X</span></div>"
$(".condition").append(div);
}
});
});
});
//on委托事件，给现在没有存在的元素添加事件
$(".condition").on("click", ".deleteBtn", function () {
$(this).parent().remove();
var arr=$(this).parent().attr("class").split(" ");
// console.log(arr[0]);
// console.log(arr[0].trim().slice(arr[0].length-1,arr[0].length));
var i=arr[0].trim().slice(arr[0].length-1,arr[0].length);
$(".wrap ul li").eq(i-1).children("span").eq(1).addClass("activeColor").siblings().removeClass("activeColor");
})
});
</script> -->
<script>
window.onload = function () {
var condition = document.querySelector(".condition"),
showDiv = document.querySelectorAll(".show~div"),
conditionSpan = document.querySelectorAll(".condition span"),
wrapLi = document.querySelectorAll(".wrap ul li"),
fork = document.querySelectorAll(".fork"),
wrapSpan = document.querySelectorAll(".wrap ul li span"),
index = 0,
number = 0;
for (var i = 0, len = wrapLi.length; i < len; i++) {
wrapLi[i].index = i;
wrapLi[i].flag = false;
for (var j = 0, len2 = wrapLi[i].children.length; j < len2; j++) {
wrapLi[i].children[j].index2 = j;
wrapLi[i].children[j].onclick = function () {
var choice = "choice" + (this.parentNode.index + 1);
var choose = document.querySelector("." + choice);
//添加样式
for (var k = 0, len2 = this.parentNode.children.length; k < len2; k++) {
if (this.index2 != k) this.parentNode.children[k].className = "";
}
this.className = "active";
//改变内容 this.index2>1是上衣，全部【因为flag所以必须放在添加内容代码之前】
if (this.parentNode.flag && this.index2 > 1) {
choose.children[0].innerHTML = this.innerHTML;
// console.log(this.parentNode.flag )
// console.log(choose.children[0].innerHTML)
}
//添加html，内容属性样式 this.index2>1是上衣，全部
if (!this.parentNode.flag && this.index2 > 1) {
var div = document.createElement("div");
var span1 = document.createElement("span");
var span2 = document.createElement("span");
var text1 = document.createTextNode(this.innerHTML);
var text2 = document.createTextNode("X");
span1.appendChild(text1);
span2.appendChild(text2);
div.appendChild(span1);
div.appendChild(span2);
div.setAttribute("class", "active " + choice);
span2.setAttribute("class", "fork");
condition.appendChild(div);
this.parentNode.flag = true;
}
//点击全部 删除过滤条件
if (this.index2 == 1) {
condition.removeChild(choose);
this.parentNode.flag = false;
}
}
}
}
//点击叉子删除
for (var i = 0, len = fork.length; i < len; i++) {
fork[i].addEventListener("click", function () {
console.log(this.parentNode.index);
condition.remove(this.parentNode);
});
}
}
</script>
</head>
<body>
<div id="head">
<div class="wrap">
<span class="fork">R</span>
<ul>
<li class="li1">
<span class="section1">上衣 :</span>
<span class="active">全部</span>
<span>针织衫</span>
<span>毛呢外套</span>
<span>T恤</span>
<span>羽绒服</span>
<span>棉衣</span>
<span>卫衣</span>
<span>风衣</span>
</li>
<li class="li2">
<span class="section2">裤装 :</span>
<span class="active">全部</span>
<span>牛仔裤</span>
<span>小脚铅笔裤</span>
<span>休闲裤</span>
<span>打底裤</span>
<span>哈伦裤</span>
</li>
<li class="li3">
<span class="section3">裙装 :</span>
<span class="active">全部</span>
<span>连衣裙</span>
<span>半身裙</span>
<span>长袖连衣裙</span>
<span>中长连衣裙</span>
</li>
</ul>
<div class="condition">
<div>已选条件 :</div>
<div class="show">暂时没有选择过滤条件</div>
<div></div>
</div>
</div>
</div>
</body>
</html>
