在 JavaScript 中获取和设置数据属性答案

【问题标题】：Get and Set data-attributes in JavaScript在 JavaScript 中获取和设置数据属性
【发布时间】：2015-02-02 06:12:54
【问题描述】：

我需要为一个表中的 td 保存一个值“磁盘大小”，然后将相同的值设置为另一个 td。我正在尝试使用数据属性，但无法弄清楚如何做到这一点。这是我的代码：

function addOnDrop(x)
{
    if(currentDisk < 12)
    {
        var td = document.getElementsByClassName("vArray-td");
        td[currentDisk].innerHTML = x.html();
        td[currentDisk].style.backgroundColor = "black";
        td[currentDisk].data("disk-size",x.data("disk-size"));
        array.push(parseInt(x.data("disk-size")));
    }
}

我正在处理两个表，其中属性“data-disk-size”的值应该从一个 td 复制到另一个。在代码中，x 是第一个表 td 的 jQuery UI.draggable 对象，td[currentDisk] 是第二个表 td。我想设置 td[currentDisk]."data-disk-size" = x."data-disk-size"。我在这一行收到错误“Uncaught TypeError: undefined is not a function”：

td[currentDisk].data("disk-size",x.data("disk-size"));

我应该如何做到这一点？而且我想一个广泛的问题是如何在 JavaScript 中获取和设置自定义属性？

（这是我在 Stack Overflow 上的第一篇文章，如果我做错了什么，我深表歉意。）

【问题讨论】：

你试图在原生 DOM 元素上调用 jQuery 方法..
data() 是一个 jQuery 函数。您正在尝试将其直接应用于 DOM 元素，而不是 jQuery 包装器。如果让您感到困惑，我建议您不要在原始 Javascript 和 jQuery 之间来回切换。

标签： javascript jquery html custom-data-attribute

【解决方案1】：

.data 是 jQuery。

Vanilla JS 的方式是：

td[currentDisk].setAttribute("data-disk-size",x.getAttribute("data-disk-size"));

【讨论】：

【解决方案2】：

如果您使用的是 jQuery，我建议您始终如一地使用它：

var td = $(".vArray-td").eq(currentDisk);
td.html(x.html()).css("background-color", "black")
                 .data("disk-size", x.data("disk-size");
array.push(x.data("disk-size"));

【讨论】：

【解决方案3】：

正如其他人所提到的，你data 是一个jQuery 方法。所以下面这行是无效的，因为td[currentDisk] 是一个 DOM 元素，而不是一个 jQuery 对象：

td[currentDisk].data("disk-size",x.data("disk-size"));

它应该看起来更像这样：

$(td[currentDisk]).attr("data-disk-size",$(x).attr("data-disk-size"));

【讨论】：