Question

我正在玩jQuery $.data函数，我遇到了麻烦。如果我喜欢这样：

(function($){
    $.fn.testData = function() {
         var obj = $(this);
         obj.text($.data(obj,'test')); 
    }
})(jQuery);

var element = $("#test");
$.data(element,'test','hej');
element.testData();

这是未定义的。为什么呢？

修改

如果我使用elem.data(key)函数，它可以正常工作，如下所示：

(function($){
    $.fn.testData = function() {
         var obj = $(this);
         obj.text(obj.data('test')); 
    }
})(jQuery);

var element = $("#test");
element.data('test','hej');
element.testData();

但我刚刚看到Paul Irish的幻灯片，声称elem.data比$.data(elem)慢10倍： http://paulirish.com/2009/perf/

Answer 1

(function($){
    $.fn.testData = function() {
         var obj = $(this);
         obj.text($.data(obj[0],'test'));
    }

    var element = $("#test");
    $.data(element[0],'test','hej');
    element.testData();
})(jQuery);

这是jsFiddle：http://jsfiddle.net/TdJHq/

Answer 2

问题是您正在创建用于附加和检索数据的不同对象。每当您致电$(selector)时，您都会创建一个新 jQuery对象，这与您附加数据的对象不同。

这是一个简单的例子：

$.data($('#test'),'test','hej');
alert($.data($('#test'),'test'));

它会给你undefined。

这就是$.data期望DOM元素而不是jQuery对象的原因。无论您如何检索某个DOM元素，引用始终都是相同的。

因此要么传递DOM元素（$('#test')[0]）要么更好，请使用$('#test').data()。

Answer 3

jQuery.data（doc jQuery.data）适用于DOM元素，而不适用于jQuery元素。所以你必须在jQuery选择器下提取真实元素。

obj.text($.data(obj[0],'test'));

这是@alexl解释的内容。

但是还有一个.data()方法，可以在jQuery选择器上运行，所以你可以使用：

// getter
obj.text($obj.data('test'));
// setter
obj.text($obj.data('test','toto'));

你们两个都可能混在一起。

无法在函数内的对象上调用$ .data

3 个答案: