原生js實(shí)現(xiàn)商品篩選功能-創(chuàng)新互聯(lián)

本文實(shí)例為大家分享了js商品篩選功能的具體代碼，供大家參考，具體內(nèi)容如下

十年的貞豐網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都營(yíng)銷網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整貞豐建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“貞豐網(wǎng)站設(shè)計(jì)”,“貞豐網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

用到的知識(shí)：js基礎(chǔ)、dom、第一種方法用到的是js中的數(shù)組方法，第二種方法用到的是json和for-in以及es6

實(shí)現(xiàn)步驟

1、根據(jù)數(shù)據(jù)結(jié)構(gòu)生成HTML結(jié)構(gòu)（利用dom操作）

2、獲取每一個(gè)li,給每一個(gè)li中每一個(gè)a標(biāo)簽綁定事件處理函數(shù)

3、點(diǎn)擊a標(biāo)簽，把a(bǔ)標(biāo)簽的內(nèi)容添加在對(duì)象中，同時(shí)添加樣式

4、根據(jù)對(duì)象存的屬性生成選擇則條件的HTML結(jié)構(gòu)（按順序排列）

5、點(diǎn)擊關(guān)閉選擇的條件，刪除數(shù)據(jù)，移除HTML結(jié)構(gòu)，去除在其對(duì)應(yīng)的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": "系統(tǒng)",
  "data": ["android","ios","window phone","無(wú)","其他"]
  },
  {
  "title": "網(wǎng)絡(luò)",
  "data": ["聯(lián)通3G","雙卡單4G","雙卡雙4G","聯(lián)通4G"]
  }
 ]
 //利用dom動(dòng)態(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 = [];//用來(lái)存放篩選條件
 for(var i = 0; i<aLi.length; i++){
  arr.push(0);
  }//先將數(shù)組中存放aLi.length個(gè)0，方便接下來(lái)按li的順序存放數(shù)據(jù)
 for(var i=0; i<aLi.length; i++){
  
  aLi[i].prevNode = null;//記錄點(diǎn)擊的a標(biāo)簽
  aLi[i].index = i;//記錄每一個(gè)li的下標(biāo)
  var aA = aLi[i].getElementsByTagName('a');
  
  for(var j=0; j<aA.length; j++){  
  aA[j].onclick = function(){
   
   var parent = this.parentNode;//點(diǎn)擊的a標(biāo)簽的父級(jí)li
   //既要生成選擇的結(jié)構(gòu)，還要對(duì)選擇的結(jié)構(gòu)進(jìn)行排序
   //點(diǎn)擊同一行篩選條件，只能有一個(gè)
   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]){ //只有當(dāng)arr[i]的值不為0時(shí)，也即與下標(biāo)對(duì)應(yīng)的第i個(gè)li中有被選中的時(shí)候才執(zhí)行下面的代碼  
  var oChomark = document.createElement('mark');
   
  oChomark.innerHTML = arr[i];
  var oCxa = document.createElement('a'); 
  oCxa.innerHTML = 'X';
  oCxa.setAttribute('name',i);//標(biāo)記商品篩選區(qū)的a所在的li是第幾個(gè)
  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標(biāo)簽在第幾個(gè)li中（記得將字符串格式轉(zhuǎn)化為數(shù)字格式）
   this.parentNode.remove();
   aLi[num].prevNode.style.color = '';
   arr[num]=0;//讓刪除的元素在數(shù)組中對(duì)應(yīng)下標(biāo)的值變?yōu)?
   }
   }
  
   parent.prevNode = this;
   
   }
  }
  }
 }

</script>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)題目：原生js實(shí)現(xiàn)商品篩選功能-創(chuàng)新互聯(lián)
鏈接分享：http://muchs.cn/article10/dsgodo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、靜態(tài)網(wǎng)站、品牌網(wǎng)站制作、響應(yīng)式網(wǎng)站、網(wǎng)站改版、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)