Question

我正在尝试使用jQuery中的number方法动态设置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

Answer 1

历史上，jQuery通过在单独的数据结构中跟踪使用它设置的值来支持data（）方法。这允许您使用API存储对象等内容。

在检索数据时，API会同时检查数据属性以及值的内部存储。

然而，设置仍然直接进入内部商店。

由于问题发生了重大变化：

$。数据在发送号码时会失败。

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

// 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>

Answer 2

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

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

然而，

.attr("data-24","somevalue")会更新DOM elemetns属性列表，该列表允许skrollr解析新样式。

FROM 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];
    }
}

Answer 3

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

Answer 4

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

因此，如果你把数字传给它，我想它会破碎！

Answer 5

您可以尝试使用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/

Answer 6

container.data("24")实际上适合我。

这也取决于jQuery的版本。当您将.data作为设置者呼叫时，所有版本都会调用.split或.replace String方法，而不是Number方法。使用.data(24)作为访问者似乎可以使用1.8版本。

这也可能取决于浏览器，因为某些浏览器无法使用dataset。

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

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

无法在.data（）方法中设置数字

6 个答案: