多条件筛选,你用什么实现?(如何筛选多个条件)

网友投稿 755 2022-09-02

多条件筛选,你用什么实现?(如何筛选多个条件)

多条件筛选,你用什么实现?(如何筛选多个条件)

我们在电商平台购买商品时,在商品列表页根据品牌、款式、价格范围等条件进行筛选查询,当点击某个条件时,在页面上会显示用户所选择的条件集合,并且将对应的符合条件的商品信息展示出来。那么今天我们使用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小时内删除侵权内容。

上一篇:Request method ‘POST‘ not supported。 Failed to load resource: net::ERR_FAILED
下一篇:在电脑主机(MainFrame)中只需要按下主机的开机按钮(on()),即可调用其它硬件设备和软件的启动
相关文章

 发表评论

暂时没有评论,来抢沙发吧~