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() {

但我想要 ALL ELEMENTS ，而不是像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;
}

Answer 2

querySelectorAll接受一串逗号分隔的CSS选择器，就像jQuery一样，所以你可以给它相同的字符串：'a[data-hello]'。

您遇到的本机和jQuery之间的区别在于对返回的元素调用方法。 jQuery返回一个jQuery 对象，它的方法通常遍历所有元素，.click()就是这样的方法。您需要通过循环遍历数组并将相同的处理程序应用于每个元素的querySelectorAll属性，使用onclick返回的元素的数组复制它。

试试这个：

var myElements = document.querySelectorAll("a[data-hello]");
Array.prototype.forEach.call(myElements, function (element) {
    element.onclick = function () {
        // Your onclick handler code goes here.
        console.log('clicked', element);
    };
});

Answer 3

就这么简单：

var dataElems = document.querySelectorAll("[data-hello]")
for (var i=0;i<dataElems.length;i++) { 
    dataElems[i].onclick = function(i,v) {
        alert(this.innerHTML)        
    }
}

示例http://jsfiddle.net/acrashik/W86k8/

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

3 个答案: