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

实现步骤

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 oChosp = oChoose.getElementsByTagName('p')[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;

             oChosp.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); 

             oChosp.appendChild(oChomark);}

             }

             var num = 0;

             var ChoseA = oChosp.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>