【问题标题】：can we pass a variable to data attribute of html我们可以将变量传递给html的数据属性吗
【发布时间】：2017-09-05 15:30:12
【问题描述】：

到目前为止，我知道我们可以使用以下方法将数据存储在 html 元素中：

<div  data-test="hello">
$.("div").data("test")

但是，我只能存储数据属性的原始文本

我需要的是：

var t= hello
<div data-test=t>

但是当我尝试这个时，它显示的是t而不是hello。

【问题讨论】：

您应该阅读 HTML 和 DOM 之间的区别，尤其是 HTML 属性和 DOM 节点属性之间的区别。

标签： javascript jquery html web attributes

【解决方案1】：

实际上，您更改的不是attribute，而是DOM 对象的一个属性。对于data，JavaScript 有自己的机制来为元素保存data。更多信息请查看Documentation。

您可以使用jQuery 更改data（因为您已经使用过它）。使用data 函数并将变量作为第二个参数传递给函数，例如$("#d").data("test", t);

console.log($("#d").data("test"));

const t = 'hello';
$("#d").data("test", t); // <- second parameter

console.log($("#d").data("test"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d" data-test="test">

【讨论】：

【解决方案2】：

可以使用JQuery的attr()函数代替data()

var t= 'hello';
$("div").attr("data-test",t);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div  data-test=t>asd

【讨论】：

【解决方案3】：

没有 jQuery

在这种情况下，jQuery 绝对是不必要的。您可以使用此代码实现相同的目的

HTML

<div data-test="hello">

JS

const textToChange = 'other text';
const divWithDataAttribute = document.querySelector('[data-test]');
diveWithDataAttribute.dataSet.test = textToChange;

结论

这会将新结果应用到 data 属性，我们不需要 jQuery。

需要注意的是dataSet.test这部分来自data-test属性。我们删除了data- 部分并删除了其余单词的驼峰式。

例如data-test-new-test="whatever"在访问dataSet时变成testNewTest。

【讨论】：

【解决方案4】：

是的，你可以试试这个：

 $("div").attr("data-test", "test");

【讨论】：

【解决方案5】：

var t="hello";
$("div").attr("data-test",t);

【讨论】：