JavaScript練習——仿京東商城實現多條件篩選

阿新 • • 發佈：2019-02-03

京東商城效果圖：

自己實現的效果圖：

實現程式碼如下：

CSS程式碼：

*{ border:0; padding:0; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; } #pinpai,#jiage,#chicun,#pingtai,#xianka{ display:block; } #main{ width:500px; height:500px; } .leibie{ font-size:14px; font-weight:400; } .common{ font-size:12px; margin-left:5px; margin-right:5px; } #filter a{ color:#666666; text-decoration:none; } #filter a:hover{ background-color:#4598d2; } .bgColor{ background-color:#4598d2; }

HTML程式碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文件</title> </head> <body onload="jiazai()"> <div id="filter"> <div id="pinpai"> 品牌： <a href="#" mce_href="#" onclick="aClick(event)">全部</a> <a href="#" mce_href="#" onclick="aClick(event)">惠普</a> <a href="#" mce_href="#" onclick="aClick(event)">海爾</a> <a href="#" mce_href="#" onclick="aClick(event)">微星</a> </div> <div id="jiage"> 價格： <a href="#" mce_href="#" onclick="aClick(event)">全部</a> <a href="#" mce_href="#" onclick="aClick(event)">1-2999</a> <a href="#" mce_href="#" onclick="aClick(event)">3000-3999</a> <a href="#" mce_href="#" onclick="aClick(event)">4000-4999</a> <a href="#" mce_href="#" onclick="aClick(event)">5000-5999</a> </div> <div id="chicun"> 尺寸： <a href="#" mce_href="#" onclick="aClick(event)">全部</a> <a href="#" mce_href="#" onclick="aClick(event)">8.9英寸及以下</a> <a href="#" mce_href="#" onclick="aClick(event)">11英寸</a> <a href="#" mce_href="#" onclick="aClick(event)">12英寸</a> <a href="#" mce_href="#" onclick="aClick(event)">13英寸</a> </div> <div id="pingtai"> 平臺： <a href="#" mce_href="#" onclick="aClick(event)">全部</a> <a href="#" mce_href="#" onclick="aClick(event)">Inter平臺</a> <a href="#" mce_href="#" onclick="aClick(event)">AMD平臺</a> <a href="#" mce_href="#" onclick="aClick(event)">VIA平臺</a> </div> <div id="xianka"> 顯示卡： <a href="#" mce_href="#" onclick="aClick(event)">全部</a> <a href="#" mce_href="#" onclick="aClick(event)">獨立顯示卡</a> <a href="#" mce_href="#" onclick="aClick(event)">整合顯示卡</a> </div> </div> </body> </html>

JavaScript程式碼:

//載入事件 function jiazai() { var root = document.getElementById("filter").getElementsByTagName("div");//找錯一共有多少行。 for(var i = 0; i < root.length;i++) { var tagAs = root[i].getElementsByTagName("a");//每一行中由a標籤構成的陣列。 tagAs[0].className = 'bgColor'; } } //a標籤的單擊事件，改變背景顏色 function aClick(event) { var tag = event.srcElement || event.target;//找到單擊被點選的元素 var father = tag.parentNode;//找到最近的一個div標籤 while(father.nodeName != "DIV")//如果tag的父級標籤不是div標籤則繼續往上找 { father = father.parentNode; } var fatherID = father.id;//找到tag標籤最近一個父級div標籤的id //將fatherID該div物件下面的所有a標籤，將各個a標籤的className屬性清空 for(var i = 0; i < document.getElementById(fatherID).getElementsByTagName("a").length;i++) { document.getElementById(fatherID).getElementsByTagName("a")[i].className = ""; } //為事件源tag物件新增className樣式 tag.className = 'bgColor'; alert(fe()); } //遍歷所有a標籤，根據a標籤的className不同來獲取使用者選中的型別 function fe() { var result = ""//記錄返回的條件 var root = document.getElementById("filter").getElementsByTagName("a");//獲取id為filter標籤下面的所有a標籤 for(var i = 0; i < root.length;i++) { if(root[i].className == 'bgColor') { result += root[i].innerHTML; } } return result; }

<！---End-->

JavaScript練習——仿京東商城實現多條件篩選

JavaScript練習——仿京東商城實現多條件篩選

仿京東商城實現多條件篩選

JQuery練習——仿京東商城多條件篩選

Vue.js實現多條件篩選、搜尋、排序及分頁的表格功能

DIV+CSS實現仿京東商城導航條效果

基於JSON+JQuery實現的多條件篩選功能(類似京東和淘寶功能)

PHP連接數據庫實現多條件查詢與分頁功能——關於租房頁面的完整實例操作

Laravel 實現多條件搜索查詢

Yii 2.0開發一個仿京東商城平臺

sort函數實現多條件排序

php多條件篩選功能的實現

redis zinterstrore指令的使用(實現多條件的有序索引)

JavaScript：用原生js實現重力條件下，可拖拽小球的碰撞運動

SpringData jpa 實現多條件動態查詢，分頁功能

帝國cms結合項如何實現多條件查詢

EXCEL 中利用 INDEX 和match 來實現多條件查詢

Android 仿京東淘寶多規格選擇

mybatis 動態sql語句實現多條件查詢（foreach的使用）

實現多條件模糊查詢SQL語句

JQ實現網站多條件篩選顯示（下）

JavaScript練習——仿京東商城實現 多條件篩選

相關推薦

JavaScript練習——仿京東商城實現多條件篩選