javascript - 选择具有特定数据属性 Javascript 的所有元素？

Question

使用 jquery，我得到以下代码:

$('a[data-hello]').click(function(){ = 选择所有带有“data-hello”的“a”元素。

我正在尝试使用原始 Javascript 来实现这一点。我停在这里:

document.querySelectorAll("data-hello").onclick = function() {

(顺便说一句，有一种方法可以选择带有 data-hello 的所有 A 元素，而不是全部带有 data-hello 的 A 元素？o.O)

但是querySelectorAll返回一个数组。因此，只有当我确定位置时它才有效。这样:

document.querySelectorAll("data-hello")[5].onclick = function() {

但是我想要所有元素，而不是像 jQuery 那样的特定元素。我无法使用 jQuery。

用Jquery就这么简单:(我必须做一个“for”来遍历JS中的所有位置？有这个必要吗？抱歉我不明白...

---

我想做的事情:

我想获取被点击的元素的data属性值。我在函数内部使用 this 作为 this，然后，我应用了另一个在特定元素中添加类的函数。 基本上，有一些按钮在数据属性值中带有类。该类将应用于特定元素。

Answer 1

将元素数组(实际上是 NodeList)放入变量中并循环遍历它们以在每个元素上设置事件处理程序。这就是 jQuery 方法将某些内容应用于 jQuery 对象中的所有元素的作用。没有办法绕过循环，对于 jQuery，它只是隐藏在方法中。您可以将与 jQuery 中相同的选择器语法与 querySelectorAll 结合使用。

var arr = document.querySelectorAll("a[data-hello]");
var f = function() {
  // do something
};
for (var i = 0; i < arr.length; i++) {
  arr[i].onclick = f;
}