html“data-”属性为javascript变量

是否可以将html数据属性注册为javascript变量的名称?

我所说的是这样的:

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

$('form').find('input').each(function() {
  var $(this).attr('data-varName') = $(this).val();
});
最佳答案
一种选择是将变量存储在对象中,然后使用object-notation为变量赋值:

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

显然,您也可以使用窗口全局对象,并将变量注册到该对象,但这会带来担心窗口对象的变量是全局的,并且可以被代码中其他地方的插件覆盖.

转载注明原文:html“data-”属性为javascript变量 - 代码日志