首先看下效果：

Js代碼：

<script type="text/javascript">$(".search_qxxx > ul > li > a").click(function () {if ($(this).attr("class") != "text_ce5a11") {if (typeof ($("#soKeyWords").find("#" + $(this).parents().find(".text_ce5a11").attr("id")).html()) != 'undefined') { // 當前分類已選條件， 覆蓋已有內容if ($(this).parent().siblings("li").andSelf().find("a").first()[0].innerHTML == $(this).parent().siblings("li").andSelf().find("a").first().context.innerHTML) {// 如果選擇的是不限，則應該把下面的該類型中的條件刪除。$("#soKeyWords").find("#" + $(this).parents().find(".text_ce5a11").attr("id")).detach();$(this).addClass("text_ce5a11").parent().siblings("li").find("a").removeClass("text_ce5a11");}$("#soKeyWords").find("#" + $(this).parents().find(".text_ce5a11").attr("id")).html("" + $(this).html() + "&nbsp;<a href='javascript:void(0);'>×</a>").attr("id", $(this).attr("id"));}else {if ($("#soKeyWords .option").size() == 0) {$("#soKeyWords").html("<span class='option' id='" + $(this).attr("id") + "'>" + $(this).html() + "&nbsp;<a href='javascript:void(0);'>×</a></span>");}else {$("#soKeyWords").append("<span class='option' id='" + $(this).attr("id") + "'>" + $(this).html() + "&nbsp;<a href='javascript:void(0);'>×</a></span>");}}$(this).addClass("text_ce5a11").parent().siblings("li").find("a").removeClass("text_ce5a11");return false;}return false;});$("#soKeyWords > span > a").live("click", function () {$(this).parent().detach();$(".search_qxxx > ul > li").find("#" + $(this).parent().attr("id")).removeClass("text_ce5a11").parent().siblings("li").andSelf().find("a").first().addClass("text_ce5a11");});</script>

?

預覽：http://guolingfa.cn/searchdemo/index.html

轉載于:https://www.cnblogs.com/guolf/p/3273200.html

總結

以上是生活随笔為你收集整理的JQ实现仿淘宝条件筛选的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。