Как я могу передать атрибут набора данных динамически, используя пользовательский ввод?

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, но не могу понять это. Похоже, вы должны передать атрибут данных в случае верблюда, но не можете сделать это через переменную?

Заранее спасибо.

Answer 1

Когда вам нужно получить доступ к свойству объекта через переменную, вам нужно использовать синтаксис скобок массива.

В приведенном ниже примере введите "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>