getElementsByClassName onclick问题[重复]答案

【问题标题】：getElementsByClassName onclick issue [duplicate]getElementsByClassName onclick问题[重复]
【发布时间】：2012-11-19 23:47:06
【问题描述】：

我正在使用Robert Nyman's 脚本来获取文档中具有相同类的所有元素，但它不适用于 onclick 或任何其他事件：

var photo = document.getElementsByClassName("photo_class","img",document.getElementById("photo_wrap")); 
photo.onclick = function(){alert("Finaly!");

也许你知道如何解决它？谢谢！

【问题讨论】：

啊，我当时真是个天才。可爱的

标签： javascript

【解决方案1】：

我猜照片是一个数组。如果是这种情况，请尝试：

var photo = document.getElementsByClassName(
    "photo_class","img",document.getElementById("photo_wrap")
);

for (var i=0; i < photo.length; i++) {
    photo[i].onclick = function(){
        alert("Finaly!");
    }
};

【讨论】：

@Dima aretias 应该得到所有的赞誉，我只对他的帖子做了一个小的编辑。 ;-)
感谢@aretias！迟到总比没有好。

【解决方案2】：

getElementsByClassName 接受一个参数，类名并返回一个节点列表

如果您希望 'photo_wrap' 中的类名为 'photo_class' 的元素采用相同的事件处理程序，您可以这样做

var container = document.getElementById('photo_wrap');
var elements = container.getElementsByTagName('photo_class');
for(var x = 0; x < elements.length; x++) {
    // ignore anything which is not an <img>
    if(elements[x].nodeName != "IMG") {
       continue;
    }

    elements[x].addEventListener("click",function(){

      // do something when element is clicked
      this.style.backgroundColor = 'red'; // change element bgcolor to red

    },false);
}

【讨论】：

【解决方案3】：

使用 jquery，您可以轻松地定位所有具有特定类的元素并为其分配 onclick 事件，如下所示：

$(".photo_class").click(function(){
                            alert("Finally!")});

如果您想定位具有 id 的特定元素，则可以使用以下调用：

$("#photo_element_id").click(function(){
                            alert("Finally!")});

【讨论】：

【解决方案4】：

试试

photo[0].onclick = function(){alert("Finaly!");};

getElementsByClass 返回数组

【讨论】：

【解决方案5】：

您是否尝试这样做？

var photo = document.querySelector("#photo_wrap img.photo_class");
photo.onclick = function() {alert("Hello!");};

【讨论】：

需要注意的是，这里只选择第一张的照片。