jQuery removeAttr自定义属性值的坑
Author: Vic.Wang 2016/06/06
今天又遇到一个jQuery中使用data()引起的坑。
代码如下:
<a data-ids="11">选择</a>
$wrap.on('click', 'a', function() { var $this = $(this), ids = $this.data('ids'); console.log(ids); /*11*/ if ($this.hasClass('cur')) { $(this).removeClass('cur').removeAttr('data-ids'); console.log(ids); /*11*/ } else { $(this).addClass('cur').attr('data-ids', 22); console.log(ids); /*11*/ } });
平常开发的时候,习惯将一些参数绑定在HTML元素上,data-*,类似这种以 data- 开头的形式,直接通过jQuery的 data('key') 去取值,要改变值就用 attr('key', value),但是今天发现个问题,通过attr设置的值貌似无效,取过来的还是最初的。
去翻手册,发现了专门用于删除 data 的函数 removeData(),试了下,这样是可以的,看来jQuery data() 的实现结合了自定义属性和data数据存储,两者引起了混乱(瞎猜的 = =)
修改如下:
$wrap.on('click', 'a', function() { var $this = $(this), ids = $this.data('ids'); console.log(ids); /*11*/ if ($this.hasClass('cur')) { $(this).removeClass('cur').removeData('ids'); console.log(ids); /*22*/ } else { $(this).addClass('cur').data('ids', 22); console.log(ids); /*11*/ /*22*/ } });
两处代码,仅仅是将 orderWay 改成 orderway 而已,区别这么大,jQuery实现 data 的时候应该是存在问题的。
注:用的jQuery版本是1.8.3的,其他更高版本是否有问题,有待验证。
本文地址:http://blog.mingsixue.com/bugs/jQuery-data-value-remove.html
文章若需转载,请附上原文链接,谢谢配合。^_^