-
我们在电子商务平台上购买商品，根据品牌、款式的商品列表页屏查询、价格范围和其他条件，当你点击一个条件，在页面上显示一个收集用户选择的条件下，商品信息的显示和满足相应的条件。所以今天我们使用jQuery为了实现这一前端的影响。
运行效果图：
HTML
首先，我们分类的查询条件，将有条件的集装箱li.select-list在页面和选择条件的集装箱div.select-result。
uff1a夹克
整体
毛衣
羊毛外套
T恤
羽绒服
棉衣
毛衣
风衣
裤子:
整体
牛仔裤
小脚/铅笔裤
休闲裤
护腿
哈伦裤
选择的条件：
暂时不选择过滤条件
内容完成后，将CSS样式添加到页面内容并加载相关JS。
jQuery
当用户单击任何条件时，当前选定的状态被标记，相邻条件未选中，并更新选定的条件容器内容。见代码：
$（文档）Ready（函数（）{）
$（# select1 DD）。Click（function（）{）
$（这）。AddClass（选择），兄弟姐妹（）。RemoveClass（选择）；
如果（$（this）。HasClass（全选））{
$（# Selecta）删除（）；
{人}
无功copythisa =美元（这）Clone（）；
如果（$（# Selecta）。长> 0）{
$（#选择）.html（$（this）。文本（））；
{人}
$（。选择结果DL）。追加（copythisa.attr（身份
}
}
}）；
$（# select2 DD）。Click（function（）{）
$（这）。AddClass（选择），兄弟姐妹（）。RemoveClass（选择）；
如果（$（this）。HasClass（全选））{
$（# selectb ）删除（）；
{人}
无功copythisb =美元（这）Clone（）；
如果（$（# selectb）。长> 0）{
$（# selectb ）.html（$（this）。文本（））；
{人}
$（。选择结果DL）。追加（copythisb.attr（身份
}
}
}）；
$（# Selecta）。活（单击
函数（）{
美元（这个）；
$（# select1。全选）。AddClass（选择），兄弟姐妹（）。RemoveClass（选择）；
}）；
$（# selectb）。活（单击
函数（）{
美元（这个）；
$（# select2。全选）。AddClass（选择），兄弟姐妹（）。RemoveClass（选择）；
}）；
$（。
函数（）{
如果（$（选择结果 ））长度> 1）{
$（。选择 ）。隐藏（）；
{人}
$（）；
}
}）；
}）；
在实际应用中，我们应该结合后端程序来实现选择美观的条件，页面响应的内容也会发生变化，感兴趣的学生可以尝试一下。
以上就是本文的全部内容，告诉大家如何实现js的多条件筛选功能，希望能对您有所帮助。