HTML中的"data-"属性作为JavaScript变量

Question

能否将HTML的data-attribute作为JavaScript变量名进行注册？

我所说的是像这样的东西：

<form>
  <input data-varName="test1" />
  <input data-varName="test2" />
</form>

$('form').find('input').each(function() {
  var $(this).attr('data-varName') = $(this).val();
});

- Nikolay

---

使用动态变量名在JavaScript中请提供更多上下文以获取更准确的翻译。 - SEUH

Answer 1

定位 data 属性的正确语法是：

var myVar = $(this).data("varName");

更多信息请参见此处：

https://api.jquery.com/data/

编辑 --

这没有解决如何设置变量名的问题，但这是定位数据属性的正确方法。

- Toby

---

我没有使用jQuery数据属性，而是使用HTML data-*。https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_data_attributes另一个参考：http://stackoverflow.com/questions/22113046/are-html-5-data-and-jquery-data-same-thing - Nikolay

除非我理解错了，jQuery现在使用.data来定位HTML5数据属性 - 详见此更详细链接：https://api.jquery.com/data/#data-html5。 - Toby

此外，更多信息请参见此SO帖子：https://dev59.com/zHE95IYBdhLWcg3wCJXk#11673313 - Toby

Answer 2

一种选择是将变量存储在对象中，然后使用对象符号将值分配给变量：

<form>
  <input data-varName="test1" />
  <input data-varName="test2" />
</form>

var allVariables = {};

$('form input').each(function(){
  allVariables[ $(this).data('varName') ] = $(this).val();
});

或者，使用纯JavaScript：

Array.from( document.querySelectorAll('form input') ).forEach(function(el) {
    allVariables[ el.dataset.varName ] = el.value;
});

鉴于上述HTML，将会生成一个名为allVariables的对象，其内容如下：

{
  'test1' : test1Value,
  'test2' : test2Value
}

显然，你也可以使用 window 全局对象，并将变量注册到其中，但这样会带来一个问题，window 对象的变量是全局的，可能被代码中其他地方的插件重写。

- David Thomas

---

实际上这正是我所需要的。非常感谢！ - Nikolay