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

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

HTML

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

• 上装：

  全部

  针织衫

  毛呢外套

  T恤

  羽绒服

  棉衣

  卫衣

  风衣

• 裤装：

  全部

  牛仔裤

  小脚/铅笔裤

  休闲裤

  打底裤

  哈伦裤

• 已选条件：

  暂时没有选择过滤条件

布置好内容后，给页面内容加上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中怎么实现多条件筛选问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。