jquery 筛选器,jquery筛选选择器
本文操作环境：Windows7系统、jquery3.2.1、戴尔自交第三代电脑。
jquery怎么实现筛选功能？
框架实现筛选功能。
商品属性筛选
商品的属性筛选是一个十分常见的功能，通常是同一类型的属性只能选择一个。例如价格范围，或者品牌，为了使选择的内容看上去更直观，一般都会将选择项列出，并拥有点击取消选择，点击同类替换的功能。
在下面给出两个完整实现。
实现1：
使用框架的附录让点击的元素加入到列出项里面（同时检测列出项是否有同一类的元素，有则替换出来，使它返回原列表),
在列出项里面点击元素，则返回原div，这里为了实现返回原来的差异使用了自定义属性。
自然这个实现是有一定的问题，由于限制了差异的班级和父元素的编号一致，这种情况很不方便，
而且每一次都会需要重新绑定所有事件，一个递归。效率上有所欠缺，
接下来看第二种思路，更简单清晰一点。效率会更高一点，而且不需要编号和班级相同，也无需重新绑定多个事件
！声明文档类型
超文本标记语言
头
标题动画/标题
style type=text/css 。第一类，类别2{
宽度：100像素
高度：40px
边距：10px
}
#计数{
背景色：sandybrown
宽度：400像素
高度：200像素
}
/风格
/头
身体
div id=
按钮"数据所属"皮鞋/按钮
按钮"数据所属"凉鞋/按钮
按钮"数据所属"拖鞋/按钮
/div
div id=" 2 "
按钮"数据所属"手套/按钮
按钮"数据所属"皮手套/按钮
按钮"数据所属"毛手套/按钮
/div
div id=count/div
/body
/html
脚本src= http://libs。百度一下。com/jquery/2。0 .0/jquery。量滴js /脚本
脚本类型=文本/javascript
（功能检查(){
$( class 1 button，#class2button ).关闭("点击")。on(click ，function(){
$( #计数按钮。$(这个)。属性(数据所属))。appendTo(# $(this).attr(数据所属)；
$(这个)。appendTo( # count )；
检查()
})
$(#count button ).关闭("点击")。on(click ，function(){
$(这个)。appendTo(# $(this).属性(数据所属))
检查()
})
})()
/script实现2：
使用框架的克隆函数，这样原列表就不会需要改动，点击属性列表里面的内容只需要直接移除，不需要编号和班级一致。
更自由一些。代码减少了，没有递归的，没有数据修改绑定的问题，比实现一优化很多
！声明文档类型
超文本标记语言
头
meta charset=UTF-8
标题/标题
/头
style type=text/css 。第一类，类别2{
宽度：100像素
高度：40px
边距：10px
}
#计数{
背景色：sandybrown
宽度：400像素
高度：200像素
}
/风格
身体
差异
按钮"数据所属"皮鞋/按钮
按钮"数据所属"凉鞋/按钮
按钮"数据所属"拖鞋/按钮
/div
差异
按钮"数据所属"手套/按钮
按钮"数据所属"皮手套/按钮
按钮"数据所属"毛手套/按钮
/div
div class=count
/div
/body
/html
脚本src= http://libs。百度一下。com/jquery/2。0 .0/jquery。量滴js /脚本
脚本类型=文本/javascript
//只需保持按钮的班级标志和数据所属一致即可。
$(div:lt(2) button ).单击（函数(){
$(div.count $(这个)。属性(数据所属))。移除();
$(这个)。克隆()。appendTo( div。计数’)；
$(.计数按钮)。关闭("点击")。on(click ，function(){
$(这个)。移除();
})
})
/script推荐学习：《jquery视频教程》以上是jquery如何实现筛选功能的详细内容。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。