如何使用用户输入动态传递数据集属性？

Question

我有一个文本输入框，用户可以在其中输入他们想要在 DOM 中查找的数据-*。我通过单击按钮获得此用户输入，然后进行一些解析。如何将输入文本的值作为 HTMLElement.dataset 选择器的最后一部分？

//HTML for text input
<div class="form-group">
  <label for="specificSelector">Specific Selector</label>
  <input type="text" class="form-control" id="specificSelector" placeholder="Enter the specific selector here">
</div>
<p id="a"></p>

//JavaScript
var specificSelector = document.getElementById("specificSelector").value;
var a = document.getElementById("a"); // Test element
var parsedSelector = specificSelector.match(/data-(.*)/)[1];
console.log("Parsed selector: ", parsedSelector);

//I need to pass the value of the parsedSelector to the below line
var aData = a.dataset.parsedSelector;
console.log("aData: ", aData);

我已从 MDN 开发人员处阅读 this，但无法理解。看起来您必须以驼峰式大小写传递数据属性，但可能无法通过变量传递？

提前致谢。

Answer 1

当你需要通过变量访问对象属性时，你需要使用array-bracket语法。

在下面的示例中，在文本框中键入 "data-test"，然后按 TAB。

// Get a reference to the input
var specificSelector = document.getElementById("specificSelector");

var a = document.getElementById("a"); // Test element

// Set up an event handler for when the data is changed and the 
// input loses focus
specificSelector.addEventListener("change", function(){
  // Extract the custom name portion of the data- attribute
  var parsedSelector = specificSelector.value.match(/data-(.*)/)[1];
  console.log("Parsed selector: ", parsedSelector);

  // Pass the string (stored in the variable) into the dataset object
  // of another element to look up the object key.
  var aData = a.dataset[parsedSelector];
  console.log("aData: ", aData);
});

<div class="form-group">
  <label for="specificSelector">Specific Selector</label>
  <input type="text" class="form-control" id="specificSelector" placeholder="Enter the specific selector here">
</div>
<div id="a" data-test="test2"></div>

如何使用用户输入动态传递数据集属性？

How do I pass a dataset attribute dynamically using user input?

html

javascript

dom

custom-data-attribute