Question

所以，我有这个HTML代码：

<div class='class1' id='example'>
  <span class='class2'>Some text</span>
  <span class='class3'>Some text 2</span>
 </div>

我想获取每个class1然后在class2和class3上添加一个事件监听器（click）（我需要该id来从PHP文件中获取一些信息）。我试过这样的事情：

var yes = document.getElementsByClassName('class1');
for (var i=0 ; i<yes.length;i++)
  yes[i].getElementsByClassName('class2').addEventListener('click',redirectfunction,false);

它无法正常工作。我该怎么办？！

Answer 1

首先getsElementsByClassName应为getElementsByClassName（如果不是拼写错误），然后yes[i].getElementsByClassName('class2')会返回HTMLCollection找到的元素，您使用的是：

yes[i].getElementsByClassName('class2')
      .addEventListener('click',redirectfunction,false);

因此，您正在尝试在集合上添加事件侦听器。如果有多个元素或者只是使用这样的东西，你可以使用另一个循环：

yes[i].getElementsByClassName('class2')[0]
      .addEventListener('click',redirectfunction,false);

更新：（Example）

var els = document.querySelectorAll('div.class1');
for(var i =0, l=els.length; i<l; i++) {
    var cls = els[i].querySelectorAll('span[class^=class]');
    for(var x =0, n=cls.length; x<n; x++) {
        cls[x].addEventListener('click', function(e) {
            redirectfunction.call(this, e, this.parentNode.id);
        }, false);
    }
}

function redirectfunction(e, id) {
    alert('This is id: ' + id);
}

Answer 2

您最好使用 querySelectorAll ，因为它比 getElementsByClassName （IE 8+）具有更广泛的支持，您可以一次性获取元素：

var yes = document.querySelectorAll('.class1 > .class2, .class1 > .class3');

querySelectorAll 返回一个静态NodeList，因此迭代返回的对象以访问成员。

但是，请准备好为旧浏览器提供后备支持。

获取document.getElementsByClassName的子类

2 个答案: