jQuery中怎么實現多條件篩選，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

網站建設哪家好，找創(chuàng)新互聯！專注于網頁設計、網站建設、微信開發(fā)、小程序開發(fā)、集團企業(yè)網站建設等服務項目。為回饋新老客戶創(chuàng)新互聯還提供了寶清免費建站歡迎大家使用！

HTML

首先，我們將查詢條件分類，在頁面中布置條件容器li.select-list和已選擇的條件容器p.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="#">風衣</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">暫時沒有選擇過濾條件</dd> </dl> </li> </ul>

布置好內容后，給頁面內容加上css樣式以及加載相關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

當用戶點擊任意條件時，標記當前選中狀態(tài)，相鄰條件取消選中狀態(tà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(); } }); });

關于jQuery中怎么實現多條件篩選問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注創(chuàng)新互聯行業(yè)資訊頻道了解更多相關知識。

分享名稱：jQuery中怎么實現多條件篩選-創(chuàng)新互聯
本文地址：http://jinyejixie.com/article6/diodig.html

成都網站建設公司_創(chuàng)新互聯，為您提供微信小程序、面包屑導航、網站制作、網站設計公司、移動網站建設、網站設計

廣告

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