1

我回答了这个问题：Manipulate Custom Values with jQuery

使用这个 jQuery：

$('img').attr('u', function(i,u) {
    /* i is the index of the current image among all the images returned by the selector,
       u is the current value of that attribute */
    return u.slice(0, -1) + (parseInt(u.replace(/\D/g,''), 10) + 1);
});

链接到答案，来自那个答案的 JS Fiddle 演示。

但是后来我觉得我应该展示如何“正确地”使用data-*HTML5 下允许的自定义属性（而不是无效的，尽管是功能性的自定义属性），所以我将 HTML 调整为：

<img src="http://placekitten.com/400/500" class="className" click="" id='button4' data-u="button6" data-r="button5" data-l="ele1" data-d="" />

（不，我不知道这个click属性是什么意思，或者它为什么在那里，所以我不理会它。）

并测试了以下 jQuery：

$('img').data('u', function(i,u) {
    /* i is the index of the current image among all the images returned by the selector,
       u is the current value of that attribute */
    return u.slice(0, -1) + (parseInt(u.replace(/\D/g,''), 10) + 1);
});

$('img').each(function(){
    console.log($(this).data('u'));
});

JS 小提琴演示。

现在，通过该data()方法，我意识到属性不会被更新，这就是为什么我使用console.log()来确认更新的值，但是输出是匿名函数本身，而不是我期望从中返回的值功能。我意识到这不太可能是一个错误，并且可能是预期的行为，但是有没有办法使用匿名函数来更新属性，例如在 , 等中使用的相同attr()方式text()？

4

3 回答 3

1

基本上你的期望是错误的。

jQuery.data根本不修改元素的数据属性；它只是通过自己选择的机制将您提供的数据与元素相关联。

故意未指定实现，并且.data根本不处理此数据；你把东西放进去，当你后来要求它时，这正是你得到的。从 jQuery 的角度来看，数据是完全不透明的。

确实，.data提供从其 HTMLdata-属性中预填充元素的关联数据作为一种便利功能，但这不是它的主要任务。当然，在这种情况下，数据的不透明性仍然得到维护：当您请求数据时，您得到的正是 HTML 中指定的内容。

于 2013-05-17T16:13:23.090 回答
1

data与许多其他 jquery 函数（例如attr和许多其他函数）之间的区别在于data可以存储任何类型的对象。 attr只能存储字符串值。正因为如此，想要使用data.

如果 jquery 团队要为 进行类似的签名data，他们将需要以某种方式区分想要存储函数和想要评估函数。它可能会变得太混乱，因此它们只是不包括执行该功能的能力。

我认为你能做的最好的就是使用each.

于 2013-05-17T16:17:21.393 回答
1

如果您需要此功能，您可以轻松添加它：

$.fn.fdata = function( name, callback ) {
    return this.each( function( i, element ) {
        var $element = $(element);
        var data = callback( i, $element.data(name) );
        $element.data( name, data );
    });
};

现在您可以$(sel).fdata( name, callback );在回调中使用并执行您想要的操作。

扩展现有方法以添加回调功能可能很诱人$().data()，但正如其他人指出的那样，这会破坏任何其他依赖于能够将函数引用存储为数据的代码。

当然，仅添加此.fdata()方法也可能会破坏其他代码 - 如果您页面上的某些其他代码也尝试在其自己的插件中使用相同的方法名称。所以把它变成一个简单的函数可能更明智。无论哪种方式，代码几乎相同：

function updateData( selector, name, callback ) {
    $(selector).each( function( i, element ) {
        var $element = $(element);
        var data = callback( i, $element.data(name) );
        $element.data( name, data );
    });
}
于 2013-05-17T16:20:55.223 回答