JQ实现仿淘宝条件筛选

首先看下效果：

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