原生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(\'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:;\" rel=\"external nofollow\" rel=\"external nofollow\" >x</a></mark>\'
  // 生成结构的时候在行间保存对象的key值
  html += `<mark>${chooseObj[i]}<a data-index=\"${i}\" href=\"javascript:;\" rel=\"external nofollow\" rel=\"external nofollow\" >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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。