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

Question

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

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

我正在尝试使用原始 Javascript 来实现。我到此为止:

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

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

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

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

但我想要所有元素，而不是特定元素，例如 jQuery。我不会使用 jQuery。

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

---

我想做什么:

我想获取被点击的元素的数据属性值。我在函数内部为此使用了 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;
}