html“data-”属性为javascript变量

Question

Is it possible to register a html data-attribute as the name of a javascript variable?

What I am talking about is something like this:

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

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

Answer 1

The correct syntax to target data attributes is:

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

See here for more info:

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

EDIT --

This doesn't address the issue of how to set the variable name, but it is the correct method for targeting data attributes.

Answer 2

One option is to store your variables in an object, and then use object-notation to assign values to variables:

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

var allVariables = {};

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

Or, in plain JavaScript:

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

Which, given the above HTML, would result in an allVariables object like:

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

Obviously, you could also use the window global object, and register variables to that instead but that carries the concern that variables of the window object are global and can be over-written by plugins elsewhere in the code.