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

Question

假设JS呈现了几个输入字段，它们的data-id值都具有不同的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);

Answer 1

您未指定要收听的事件。我假设发生“更改”事件，但是您可以将其修改为您选择的任何内容。

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

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