在多个元素的数据属性上添加更改侦听器答案

【问题标题】：Add change listener on data attributes for multiple elements在多个元素的数据属性上添加更改侦听器
【发布时间】：2020-06-18 16:06:47
【问题描述】：

假设 JS 渲染了几个输入字段，它们都有不同的 id 作为data-id 值。如何将事件侦听器添加到具有data-id 属性的所有输入，然后将其作为 AJAX 请求发送到 PHP？

<input type="text" data-id="${element.id}" class="review" name="review" placeholder="Type your review"/>

xmlHttp.open("GET", "/review=" + << input field value here >>, true);

【问题讨论】：

标签： javascript php ajax dom

【解决方案1】：

您没有指定要监听的事件。我假设了一个“更改”事件，但您可以将其修改为您选择的任何内容。

您可以使用querySelectorAll 按属性名称选择元素，并将属性名称放在方括号中。

const els = Array.from(document.querySelectorAll('[data-id]'));
for(const el of els) {
  el.addEventListener('change', () => {
    //your ajax code here
  });
}

【讨论】：

【解决方案2】：

您可以使用 document.querySelectorAll('input[data-id]') 获取所有具有“data-id”作为属性的输入元素，然后循环遍历 HTML 元素并为每个元素添加事件监听器，如下所示：

const elements = document.querySelectorAll('input[data-id]');
elements.forEach(key => {
      key.addEventListener('change', console.log('Event added!!!'));
});

如果您想将事件添加到具有特定 data-id 值的输入元素，您可以使用以下格式仅获取一个元素：

const id=1;
const specificInput = document.querySelector(`input[data-key="${id}"]`);

【讨论】：