原生js程式碼實作商品篩選方法

本文主要跟大家分享原生js程式碼實作商品篩選方法，用到的知識：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(&#39;type&#39;);
		var oChoose = document.getElementById(&#39;choose&#39;);
		var oChosp = oChoose.getElementsByTagName(&#39;p&#39;)[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(&#39;li&#39;);
			var aSpan = document.createElement(&#39;span&#39;);
			
			aSpan.innerHTML = crumbData[i].title;
			aLi.appendChild(aSpan);
			for(var j = 0; j<crumbData[i].data.length; j++){
			var aA = document.createElement(&#39;a&#39;);
			aA.innerHTML = crumbData[i].data[j];
			aLi.appendChild(aA);	
				}
			oType.appendChild(aLi);
			}
			
		var aLi = oType.getElementsByTagName(&#39;li&#39;);
		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(&#39;a&#39;);
			
			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 = &#39;&#39;;  
						}
					this.style.color = &#39;red&#39;;
					arr[parent.index] = this.innerText;
				oChosp.innerHTML = &#39;&#39;;	
				for(var i=0; i<arr.length; i++){
					if(arr[i]){	//只有当arr[i]的值不为0时，也即与下标对应的第i个li中有被选中的时候才执行下面的代码				
				var oChomark = document.createElement(&#39;mark&#39;);
					
				oChomark.innerHTML = arr[i];
				var oCxa = document.createElement(&#39;a&#39;);	
				oCxa.innerHTML = &#39;X&#39;;
				oCxa.setAttribute(&#39;name&#39;,i);//标记商品筛选区的a所在的li是第几个
				oChomark.appendChild(oCxa);	
				oChosp.appendChild(oChomark);}
				}
				var num = 0;
				var ChoseA = oChosp.getElementsByTagName(&#39;a&#39;);
				for(var i = 0; i<ChoseA.length; i++){
					ChoseA[i].index = i;
					ChoseA[i].onclick = function(){
						num = parseInt(this.getAttribute(&#39;name&#39;));//得到删除a标签在第几个li中（记得将字符串格式转化为数字格式）
						this.parentNode.remove();
					aLi[num].prevNode.style.color = &#39;&#39;;
					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 = &#39;&#39;
				}

				this.style.color = &#39;red&#39;;

				parent.prevNode = this; // 点击之后记录点击的这个元素
			}
		}
	}

	// 选择的容器
	var chooseElement = document.querySelector("#choose p")

	function createChooseHtml(){
		// 对象是没有顺序
		/*
			chooseObj = {
				1: "4.0"，
				0:"苹果",
				3:
				2:
			}
		*/
		var html = &#39;&#39;;
		for( var i = 0; i < lis.length; i++ ){
			// i: 0 1 2 3
			if( chooseObj[i] ){
				// html += &#39;<mark>&#39;+chooseObj[i]+&#39;<a href="javascript:;">x</a></mark>&#39;
				// 生成结构的时候在行间保存对象的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 = &#39;&#39;;
				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 = &#39;<pre class="brush:php;toolbar:false">&#39;+JSON.stringify(filterArr,null,3)+&#39;

'; }

以上是原生js程式碼實作商品篩選方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！