原生js實現(xiàn)商品篩選功能

<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": "系統(tǒng)",
  "data": ["android","ios","window phone","無","其他"]
  },
  {
  "title": "網(wǎng)絡",
  "data": ["聯(lián)通3G","雙卡單4G","雙卡雙4G","聯(lián)通4G"]
  }
 ]
 //利用dom動態(tài)添加元素
 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);
  }//先將數(shù)組中存放aLi.length個0，方便接下來按li的順序存放數(shù)據(jù)
 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
   //既要生成選擇的結(jié)構，還要對選擇的結(jié)構進行排序
   //點擊同一行篩選條件，只能有一個
   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中有被選中的時候才執(zhí)行下面的代碼  
  var oChomark = document.createElement('mark');
   
  oChomark.innerHTML = arr[i];
  var oCxa = document.createElement('a'); 
  oCxa.innerHTML = 'X';
  oCxa.setAttribute('name',i);//標記商品篩選區(qū)的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中（記得將字符串格式轉(zhuǎn)化為數(shù)字格式）
   this.parentNode.remove();
   aLi[num].prevNode.style.color = '';
   arr[num]=0;//讓刪除的元素在數(shù)組中對應下標的值變?yōu)?
   }
   }
  
   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標簽綁定點擊處理函數(shù)
  itemA[m].onclick = function(){
  var parent = this.parentNode; // 點擊的a標簽的父級 li
  // 既要生成選擇的結(jié)構，還要對選擇的結(jié)構進行排序
  // 點擊同一行篩選條件，只能有一個
  /*
   {
   key: 
   key2: 
   }
   key值是唯一的
   key值改怎定義？？？
  */
  // 把每一個li的下標作為key值，把點擊的a的內(nèi)容作為值
  chooseObj[parent.index] = this.innerText;
  console.log(chooseObj)
  // 生成篩選條件的結(jié)構
  createChooseHtml();
  // 存一下篩選的值
  filterObj[filterChoose[parent.index]] = this.innerText.trim();
  // 篩選出想要的數(shù)據(jù)
  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>'
  // 生成結(jié)構的時候在行間保存對象的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();
  // 刪數(shù)據(jù)
  delete chooseObj[this.dataset.index];
  // 點擊每一個li中的a標簽存的屬性
  lis[this.dataset.index].prevNode.style.color = '';
  console.log(chooseObj)
  };
 }
 
 }
 var shopList = document.querySelector(".shop-list")
 //篩選數(shù)據(jù)
 function filterHandle(){
 var filterArr = shopsList; // 等于原始數(shù)組
 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>