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

本文主要和大家分享原生js代码实现商品筛选方法，用到的知识：js基础、dom、第一种方法用到的是js中的数组方法，第二种方法用到的是json和for-in以及es6。

实现步骤

1、根据数据结构生成HTML结构（利用dom操作）

2、获取每一个li,给每一个li中每一个a标签绑定事件处理函数

3、点击a标签，把a标签的内容添加在对象中，同时添加样式

4、根据对象存的属性生成选择则条件的HTML结构（按顺序排列）

倍塔塞司

AI职业规划、AI职业测评、定制测评、AI工具等多样化职业类AI服务。

下载

5、点击关闭选择的条件，删除数据，移除HTML结构，去除在其对应的li中的样式

第一种方法

第二种方法

			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 += ''+chooseObj[i]+'x'
				// 生成结构的时候在行间保存对象的key值
				html += `${chooseObj[i]}x`
			}
		}

		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 = '
'+JSON.stringify(filterArr,null,3)+'
';
	}