Home / Blog / bugs

jQuery removeAttr自定义属性值的坑

Author: Vic.Wang 2016/06/06 Tags:datajQuerycustomattributeremoveAttr自定义属性

今天又遇到一个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的,其他更高版本是否有问题,有待验证。