javascript - 无法在 .data() 方法中设置数字

Question

我正在尝试使用 jQuery 中的 .data() 方法动态设置一个 number 作为我的数据类型，但到目前为止还没有运气。这可以使用我在下面列出的 .attr() 方法来实现。为什么 .data() 方法不适用于数字？

var container = $(this).find('#container'); // element which should have the data

尝试 1:

container.data(24, "opacity:0;");

尝试 2:

container.data("24", "opacity:0;");

以下代码使用.attr()工作:

container.attr("data-123", 1223);

我的个人代码:

function loader($div, $page) {
    $div.load(siteURL + $page + '/ #container', function() {
        var container = $(this).find('#container');
        container.data("24", "opacity:0;");
        container.attr("data-24", "opacity:0;"); //this works...
    });
}

loader($('section#about'), 'about'); 

更新:这是一个 jsFiddle

Answer 1

历史上，jQuery 通过在单独的数据结构中跟踪使用 data() 方法设置的值来支持该方法。这允许您使用 API 存储对象之类的东西。

检索数据时，API 将检查数据属性及其内部存储的值。

但是设置仍然直接进入内部存储。

由于问题发生了显着变化:

$.data发送号码时会失败。

在控制台中执行此操作，您将看到以下内容(这些都不会影响元素本身的标记):

// Error
$('div').data(24, 'foo')
TypeError: Object 24 has no method 'replace'

// Success
$('div').data("24", 'foo')
b.fn.b.init[966]

$('div').data("24")
"foo"

// Success
$('div').data("24", 24)
b.fn.b.init[966]

$('div').data("24")
24

这些都不会影响元素本身的数据属性。标记的最终结果将是:

<div>Hello</div>

如果您希望在元素上设置 data-xxx 属性或任何与此相关的属性，则元素属性必须以字母字符开头:

// Error
$('div').attr("24", "opacity:0")
InvalidCharacterError: An invalid or illegal character was specified, such as in an XML name.

// Success
$('div').attr("data-24", "opacity:0")
b.fn.b.init[966]

成功调用的最终结果将是:

<div data-24="opacity:0">Hello</div>