html“data-”属性为javascript变量

时间:2016-07-21 22:57:06

标签: javascript jquery html custom-data-attribute

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

我所说的是这样的:

/volume1/homes/user/x86_64-pc-linux-gnu/bin/x86_64-pc-linux-gnu-g++

2 个答案:

答案 0 :(得分:3)

目标data属性的正确语法是:

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

有关详细信息,请参阅此处:

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

编辑 -

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

答案 1 :(得分:2)

一种选择是将变量存储在一个对象中,然后使用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
}

显然,您也可以使用window全局对象,并将变量注册到该对象,但这会引起window对象的变量是全局的担忧,并且可能被其他地方的插件覆盖在代码中。