jQuery多條件篩選如何實(shí)現(xiàn)
本文實(shí)例講述了jquery實(shí)現(xiàn)多條件篩選特效。分享給大家供大家參考。具體如下:
我們在電商平臺購買商品時(shí),在商品列表頁根據(jù)品牌、款式、價(jià)格范圍等條件進(jìn)行篩選查詢,當(dāng)點(diǎn)擊某個(gè)條件時(shí),在頁面上會顯示用戶所選擇的條件集合,并且將對應(yīng)的符合條件的商品信息展示出來。那么今天我們使用jQuery來實(shí)現(xiàn)這一前端效果。
運(yùn)行效果圖:
HTML
首先,我們將查詢條件分類,在頁面中布置條件容器li.select-list和已選擇的條件容器div.select-result。
<ul class="select"> <li class="select-list"> <dl id="select1"> <dt>上裝:</dt> <dd class="select-all selected"><a href="#">全部</a></dd> <dd><a href="#">針織衫</a></dd> <dd><a href="#">毛呢外套</a></dd> <dd><a href="#">T恤</a></dd> <dd><a href="#">羽絨服</a></dd> <dd><a href="#">棉衣</a></dd> <dd><a href="#">衛(wèi)衣</a></dd> <dd><a href="#">風(fēng)衣</a></dd> </dl> </li> <li class="select-list"> <dl id="select2"> <dt>褲裝:</dt> <dd class="select-all selected"><a href="#">全部</a></dd> <dd><a href="#">牛仔褲</a></dd> <dd><a href="#">小腳/鉛筆褲</a></dd> <dd><a href="#">休閑褲</a></dd> <dd><a href="#">打底褲</a></dd> <dd><a href="#">哈倫褲</a></dd> </dl> </li> <li class="select-result"> <dl> <dt>已選條件:</dt> <dd class="select-no">暫時(shí)沒有選擇過濾條件</dd> </dl> </li> </ul>
布置好內(nèi)容后,給頁面內(nèi)容加上css樣式以及加載相關(guān)js。
<link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/script.js"></script>
jQuery
當(dāng)用戶點(diǎn)擊任意條件時(shí),標(biāo)記當(dāng)前選中狀態(tài),相鄰條件取消選中狀態(tài),并且更新已選條件容器內(nèi)容,請看代碼:
$(document).ready(function() { $("#select1 dd").click(function() { $(this).addClass("selected").siblings().removeClass("selected"); if ($(this).hasClass("select-all")) { $("#selectA").remove(); } else { var copyThisA = $(this).clone(); if ($("#selectA").length > 0) { $("#selectA a").html($(this).text()); } else { $(".select-result dl").append(copyThisA.attr("id", "selectA")); } } }); $("#select2 dd").click(function() { $(this).addClass("selected").siblings().removeClass("selected"); if ($(this).hasClass("select-all")) { $("#selectB").remove(); } else { var copyThisB = $(this).clone(); if ($("#selectB").length > 0) { $("#selectB a").html($(this).text()); } else { $(".select-result dl").append(copyThisB.attr("id", "selectB")); } } }); $("#selectA").live("click", function() { $(this).remove(); $("#select1 .select-all").addClass("selected").siblings().removeClass("selected"); }); $("#selectB").live("click", function() { $(this).remove(); $("#select2 .select-all").addClass("selected").siblings().removeClass("selected"); }); $(".select dd").live("click", function() { if ($(".select-result dd").length > 1) { $(".select-no").hide(); } else { $(".select-no").show(); } }); });
實(shí)際應(yīng)用中,我們要結(jié)合后端程序,實(shí)現(xiàn)帥選條件時(shí),頁面響應(yīng)的內(nèi)容也會變化,有興趣的同學(xué)可以嘗試下。
以上就是本文的全部內(nèi)容,告訴大家js如何實(shí)現(xiàn)多條件篩選功能,希望對大家的學(xué)習(xí)有所幫助。
- JQuery篩選器全系列介紹
- jQuery篩選器children()案例詳解(圖文)
- jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對象
- jquery實(shí)現(xiàn)多條件篩選特效代碼分享
- jQuery選擇器之屬性篩選選擇器用法詳解
- 基于jQuery實(shí)現(xiàn)表格內(nèi)容的篩選功能
- 基于JQuery的一句代碼實(shí)現(xiàn)表格的簡單篩選
- JS Jquery 遍歷,篩選頁面元素 自動完成(實(shí)現(xiàn)代碼)
- jquery表格內(nèi)容篩選實(shí)現(xiàn)思路及代碼
- jquery數(shù)組過濾篩選方法grep()簡介
- jQuery 篩選器簡單操作示例
相關(guān)文章
jquery中checkbox使用方法簡單實(shí)例演示
這篇文章主要介紹了jquery中checkbox使用方法簡單實(shí)例演示,感興趣的小伙伴們可以參考一下2015-11-11jQuery插件實(shí)現(xiàn)非常實(shí)用的tab欄切換功能【案例】
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)非常實(shí)用的tab欄切換功能,涉及jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02jquery插件之定時(shí)查詢待處理任務(wù)數(shù)量
這篇文章主要介紹了jquery定時(shí)查詢待處理任務(wù)數(shù)量插件示例2014-05-05jQuery實(shí)現(xiàn)的省市聯(lián)動菜單功能示例【測試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的省市聯(lián)動菜單功能,結(jié)合完整實(shí)例形式分析了jQuery實(shí)現(xiàn)級聯(lián)菜單的具體流程與操作方法,涉及jQuery表單及數(shù)組元素的遍歷及事件響應(yīng)處理技巧.非常簡單實(shí)用,需要的朋友可以參考下2017-01-01JQuery獲取與設(shè)置HTML元素的內(nèi)容或文本的實(shí)現(xiàn)代碼
使用JQuery可以非常容易地添加、獲取和改變某個(gè)HTML元素的內(nèi)容,你會為這種簡便感到非常愉悅2014-06-06讓網(wǎng)頁跳轉(zhuǎn)到指定位置的jquery代碼非書簽
網(wǎng)頁跳轉(zhuǎn)到指定位置,實(shí)現(xiàn)的方法有很多,本文采用最為簡單的一種,喜歡朋友可以學(xué)習(xí)下2013-09-09jquery下實(shí)現(xiàn)overlay遮罩層代碼
下面是個(gè)應(yīng)用的小例子用來統(tǒng)一處理ajax請求中利用完全透明遮罩層組織用戶和界面元素交換,當(dāng)ajax出錯(cuò)時(shí)提示用戶2010-08-08jquery心形點(diǎn)贊關(guān)注效果的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄猨query心形點(diǎn)贊關(guān)注效果的簡單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11