jQuery removeAttr自定义属性值的坑

今天又遇到一个 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*/
    }
});

注：用的 jQuery 版本是 1.8.3 的，其他更高版本是否有问题，有待验证。