Heim > Web-Frontend > js-Tutorial > Hauptteil

jquery怎么实现筛选功能

藏色散人
Freigeben: 2021-11-22 11:06:03
Original
3243 人浏览过

jquery实现筛选功能的方法:1、使用jquery的appendTo让点击的元素加入到列出项里面;2、通过jquery的clone函数实现直接移除属性列表里面的内容即可。

jquery怎么实现筛选功能

本文操作环境:Windows7系统、jquery3.2.1、Dell G3电脑。

jquery怎么实现筛选功能?

jquery 实现筛选功能。

商品属性筛选

商品的属性筛选 是一个十分常见的功能,通常是同一类型的属性只能选择一个。例如 价格范围,或者品牌,为了使选择的内容看上去更直观 ,一般都会将选择项列出,并拥有点击取消 选择 ,点击同类替换的功能。

在下面给出两个完整实现。

实现1:

使用jquery 的appendTo  让点击的元素加入到列出项里面 (同时检测列出项是否有同一类的元素,有则替换出来,使它返回原列表),

在列出项里面点击元素 ,则返回 原div ,这里为了实现 返回原来的div 使用了自定义属性 。

自然这个实现是有一定的问题,由于限制了div 的class 和父元素的id 一致,这种情况很不方便 ,

而且每一次都会需要重新绑定所有事件,一个递归。效率上有所欠缺,

接下来看第二种思路 ,更简单清晰一点。效率会更高一点,而且不需要id 和class 相同 ,也无需重新绑定多个事件




  动画
  

Nach dem Login kopieren

实现2:

使用jquery的clone 函数 ,这样原列表就不会需要改动 ,点击 属性列表里面的内容只需要直接移除,不需要id 和 class一致。

更自由一些 。代码减少了,没有递归的,没有数据修改绑定的问题,比实现1 优化很多



    
        
        
    
Nach dem Login kopieren

推荐学习:《jquery视频教程

以上是jquery怎么实现筛选功能的详细内容。更多信息请关注PHP中文网其他相关文章!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!