原生js代码实现商品筛选方法

 <script>
	window.onload = function(){
	var oType = document.getElementById('type');
	var oChoose = document.getElementById('choose');
	var oChosp = oChoose.getElementsByTagName('p')[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;
	oChosp.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);	
	oChosp.appendChild(oChomark);}
	}
	var num = 0;
	var ChoseA = oChosp.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>

	obj[key1] = "苹果"

	*/


	
	// 筛选条件
	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 p")

	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>