Native js code implements product screening method

This article mainly shares with you the method of product screening using native js code. The knowledge used: js basics, dom, the first method uses the array method in js, and the second method uses json and for-in and es6.

Implementation steps

1. Generate HTML structure according to the data structure (using dom operation)

2. Get each li and give each li a tag binding event processing function

3. Click the a tag, add the content of the a tag to the object, and add the style at the same time

4. Generate selection conditions based on the attributes stored in the object HTML structure (arranged in order)

5. Click to close the selected condition, delete the data, remove the HTML structure, and remove the style in its corresponding li

First method

   <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>

Second method

			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;

'; }

The above is the detailed content of Native js code implements product screening method. For more information, please follow other related articles on the PHP Chinese website!