网站建设资讯

NEWS

网站建设资讯

jQuery中怎么实现多条件筛选-创新互联

jQuery中怎么实现多条件筛选,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

网站建设哪家好,找创新互联!专注于网页设计、网站建设、微信开发、小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了宝清免费建站欢迎大家使用!
HTML

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

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

jQuery

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

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

关于jQuery中怎么实现多条件筛选问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。


当前名称:jQuery中怎么实现多条件筛选-创新互联
新闻来源:http://njwzjz.com/article/diodig.html