多条件筛选，你用什么实现？（多个条件筛选）

我们在电商平台购买商品时，在商品列表页根据品牌、款式、价格范围等条件进行筛选查询，当点击某个条件时，在页面上会显示用户所选择的条件集合，并且将对应的符合条件的商品信息展示出来。那么今天我们使用jQuery来实现这一前端效果。

截图如下：

首先，我们将查询条件分类，在页面中布置条件容器li.select-list和已选择的条件容器div.select-result。

                全部 

                全部 

 

                

已选条件：

 

                暂时没有选择过滤条件 

            

布置好内容后，给页面内容加上css样式以及加载相关js。

当用户点击任意条件时，标记当前选中状态，相邻条件取消选中状态，并且更新已选条件容器内容，请看代码：

$(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(); 

        } 

    }); 

});

实际应用中，我们要结合后端程序，实现筛选条件时，页面响应的内容也会变化，有兴趣的同学可以尝试下。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。