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

作者:http://www.guolingfa.cn
出处:http://www.guolingfa.cn
关于作者:初出茅庐。如有问题或建议,请多多赐教!
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接
如有问题,可以通过guo@guolingfa.cn 联系我,非常感谢。

posted @ 2013-08-21 17:54  guolf  阅读(10778)  评论(0编辑  收藏  举报

个人博客