0

我正在尝试将 a 设置number为我在 jQuery 中的data type动态使用.data()方法，但到目前为止还没有运气。这使用.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');

UPDATE: 这是一个jsFiddle

4

6 回答 6

2

过去，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>
于 2013-08-28T16:39:32.307 回答
2

skrollr 不使用 jQuery 的.data函数，它解析 DOM 元素属性列表，这就是为什么使用.attr("data-24"作为属性添加到 DOM 属性列表中的原因

.data("24","somevalue")不更新 DOM 元素属性列表，

.attr("data-24","somevalue")但是确实更新了允许 skrollr 解析新样式的 DOM elemetns 属性列表。

来自 SKROLLR.JS

从第 343 行开始：

//Iterate over all attributes and search for key frame attributes.
var attributeIndex = 0;
var attributesLength = el.attributes.length;

for (; attributeIndex < attributesLength; attributeIndex++) {
    var attr = el.attributes[attributeIndex];

    if(attr.name === 'data-anchor-target') {
        anchorTarget = document.querySelector(attr.value);

        if(anchorTarget === null) {
            throw 'Unable to find anchor target "' + attr.value + '"';
        }

        continue;
    }

    //Global smooth scrolling can be overridden by the element attribute.
    if(attr.name === 'data-smooth-scrolling') {
        smoothScrollThis = attr.value !== 'off';

        continue;
    }

    //Global edge strategy can be overridden by the element attribute.
    if(attr.name === 'data-edge-strategy') {
        edgeStrategy = attr.value;

        continue;
    }

    var match = attr.name.match(rxKeyframeAttribute);

    if(match === null) {
        continue;
    }

    var constant = match[1];

    //If there is a constant, get it's value or fall back to 0.
    constant = constant && _constants[constant.substr(1)] || 0;

    //Parse key frame offset. If undefined will be casted to 0.
    var offset = (match[2] | 0) + constant;
    var anchor1 = match[3];
    //If second anchor is not set, the first will be taken for both.
    var anchor2 = match[4] || anchor1;

    var kf = {
        offset: offset,
        props: attr.value,
        //Point back to the element as well.
        element: el
    };

    keyFrames.push(kf);

    //"absolute" (or "classic") mode, where numbers mean absolute scroll offset.
    if(!anchor1 || anchor1 === ANCHOR_START || anchor1 === ANCHOR_END) {
        kf.mode = 'absolute';

        //data-end needs to be calculated after all key frames are know.
        if(anchor1 === ANCHOR_END) {
            kf.isEnd = true;
        } else {
            //For data-start we can already set the key frame w/o calculations.
            //#59: "scale" options should only affect absolute mode.
            kf.frame = offset * _scale;

            delete kf.offset;
        }
    }
    //"relative" mode, where numbers are relative to anchors.
    else {
        kf.mode = 'relative';
        kf.anchors = [anchor1, anchor2];
    }
}
于 2013-08-28T16:55:40.753 回答
0

container.data("24", "opacity:0;");工作对吗？第一个参数必须是一个字符串（根据 jQuery 规范）。

于 2013-08-28T16:38:20.810 回答
0

因为该data()方法需要一个字符串。

因此，我想如果你传递一个数字，它会被打破！

于 2013-08-28T16:38:21.083 回答
0

您可以尝试使用 jQuery 对象本身：

var container = $(this).find('#container');

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

alert("24 is equal to: " + jQuery.data(container, "24") );

您应该注意这不会影响 DOM，因为它使用 jQuery 的本地存储。

JSFiddle：http: //jsfiddle.net/markwylde/8Q5Yh/1/

于 2013-08-28T16:40:31.513 回答
0

container.data("24")实际上对我有用。

这也取决于 jQuery 的版本。当您.data作为 setter 调用时，所有版本都将调用其中一个.split或.replace哪些是String方法，而不是Number方法。.data(24)用作访问器似乎可以在 1.8 版之后使用。

这也可能取决于浏览器，因为dataset在某些浏览器中不可用。

我的建议是为数据使用描述性名称，而不仅仅是一个数字（除非你在谈论表格 24 或其他东西，但是为什么不使用form24呢？）

编辑：如果该属性在元素上可用，则使用.data不会改变 HTML 。dataset使用.attr总是设置一个将改变 HTML 的属性。这与使用字符串与数字无关。

于 2013-08-28T16:40:36.060 回答