<!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>JS小功能系列9商品筛选
原文地址：http://www.cnblogs.com/xingkongly/p/7672543.html