用到的知识：js基础、dom、第一种方法用到的是js中的数组方法，第二种方法用到的是json和for-in以及es6
实现步骤
1、根据数据结构生成HTML结构（利用dom操作）
2、获取每一个li,给每一个li中每一个a标签绑定事件处理函数
3、点击a标签，把a标签的内容添加在对象中，同时添加样式
4、根据对象存的属性生成选择则条件的HTML结构（按顺序排列）
5、点击关闭选择的条件，删除数据，移除HTML结构，去除在其对应的li中的样式
第一种方法
<script> window.onload = function(){ var oType = document.getElementById('type'); var oChoose = document.getElementById('choose'); var oChosDiv = oChoose.getElementsByTagName('div')[0]; var crumbData = [ { "title": "品牌", "data": [ "苹果","小米","锤子","魅族","华为","三星","OPPO","vivo","乐视"] }, { "title": "尺寸", "data": ["4.0-4.5英寸","4.6-4.9英寸","5.0-5.5英寸","6.0英寸以上"] }, { "title": "系统", "data": ["android","ios","window phone","无","其他"] }, { "title": "网络", "data": ["联通3G","双卡单4G","双卡双4G","联通4G"] } ] //利用dom动态添加元素 for(var i=0; i<crumbData.length; i++){ var aLi = document.createElement('li'); var aSpan = document.createElement('span'); aSpan.innerHTML = crumbData[i].title; aLi.appendChild(aSpan); for(var j = 0; j<crumbData[i].data.length; j++){ var aA = document.createElement('a'); aA.innerHTML = crumbData[i].data[j]; aLi.appendChild(aA); } oType.appendChild(aLi); } var aLi = oType.getElementsByTagName('li'); var arr = [];//用来存放筛选条件 for(var i = 0; i<aLi.length; i++){ arr.push(0); }//先将数组中存放aLi.length个0，方便接下来按li的顺序存放数据 for(var i=0; i<aLi.length; i++){ aLi[i].prevNode = null;//记录点击的a标签 aLi[i].index = i;//记录每一个li的下标 var aA = aLi[i].getElementsByTagName('a'); for(var j=0; j<aA.length; j++){ aA[j].onclick = function(){ var parent = this.parentNode;//点击的a标签的父级li //既要生成选择的结构，还要对选择的结构进行排序 //点击同一行筛选条件，只能有一个 if(parent.prevNode){ parent.prevNode.style.color = ''; } this.style.color = 'red'; arr[parent.index] = this.innerText; oChosDiv.innerHTML = ''; for(var i=0; i<arr.length; i++){ if(arr[i]){ //只有当arr[i]的值不为0时，也即与下标对应的第i个li中有被选中的时候才执行下面的代码 var oChomark = document.createElement('mark'); oChomark.innerHTML = arr[i]; var oCxa = document.createElement('a'); oCxa.innerHTML = 'X'; oCxa.setAttribute('name',i);//标记商品筛选区的a所在的li是第几个 oChomark.appendChild(oCxa); oChosDiv.appendChild(oChomark);} } var num = 0; var ChoseA = oChosDiv.getElementsByTagName('a'); for(var i = 0; i<ChoseA.length; i++){ ChoseA[i].index = i; ChoseA[i].onclick = function(){ num = parseInt(this.getAttribute('name'));//得到删除a标签在第几个li中（记得将字符串格式转化为数字格式） this.parentNode.remove(); aLi[num].prevNode.style.color = ''; arr[num]=0;//让删除的元素在数组中对应下标的值变为0 } } parent.prevNode = this; } } } } </script>
第二种方法
// 筛选条件 var filterChoose = ["name","size","system","www"]; var filterObj = {} for( var k = 0; k< lis.length; k++ ){ //得到每一个li中的所有的a标签 itemA = lis[k].querySelectorAll("a"); lis[k].prevNode = null; // 记录点击的a标签 lis[k].index = k; // 记录每一个li的下标 for( var m = 0; m < itemA.length; m++ ){ // 给每一个a标签绑定点击处理函数 itemA[m].onclick = function(){ var parent = this.parentNode; // 点击的a标签的父级 li // 既要生成选择的结构，还要对选择的结构进行排序 // 点击同一行筛选条件，只能有一个 /* { key: key2: } key值是唯一的 key值改怎定义？？？ */ // 把每一个li的下标作为key值，把点击的a的内容作为值 chooseObj[parent.index] = this.innerText; console.log(chooseObj) // 生成筛选条件的结构 createChooseHtml(); // 存一下筛选的值 filterObj[filterChoose[parent.index]] = this.innerText.trim(); // 筛选出想要的数据 filterHandle() // 去掉之前点击的a标签的color if(parent.prevNode){ parent.prevNode.style.color = '' } this.style.color = 'red'; parent.prevNode = this; // 点击之后记录点击的这个元素 } } } // 选择的容器 var chooseElement = document.querySelector("#choose div") function createChooseHtml(){ // 对象是没有顺序 /* chooseObj = { 1: "4.0"， 0:"苹果", 3: 2: } */ var html = ''; for( var i = 0; i < lis.length; i++ ){ // i: 0 1 2 3 if( chooseObj[i] ){ // html += '<mark>'+chooseObj[i]+'<a href="javascript:;" >x</a></mark>' // 生成结构的时候在行间保存对象的key值 html += `<mark>${chooseObj[i]}<a data-index="${i}" href="javascript:;" >x</a></mark>` } } chooseElement.innerHTML = html; // 获取到所有的元素 var chooseA = chooseElement.querySelectorAll("a"); for(var j = 0; j < chooseA.length; j++){ chooseA[j].onclick = function (){ // 移出当前点击a标签的父级 // this.parentNode.parentNode.removeChild(this.parentNode); this.parentNode.remove(); // 删数据 delete chooseObj[this.dataset.index]; // 点击每一个li中的a标签存的属性 lis[this.dataset.index].prevNode.style.color = ''; console.log(chooseObj) }; } } var shopList = document.querySelector(".shop-list") //筛选数据 function filterHandle(){ var filterArr = shopsList; // 等于原始数组 for(var attr in filterObj){ // 做一个过滤 filterArr = filterArr.filter(function(obj){ console.log(attr) return obj[attr] === filterObj[attr] }) } shopList.innerHTML = '<pre>'+JSON.stringify(filterArr,null,3)+'</pre>'; } </script>