getElementsByClassName onclick问题

时间:2012-12-02 08:06:29

标签: javascript

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

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

也许你知道如何修复它? 谢谢!

5 个答案:

答案 0 :(得分:19)

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

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!");
    }
};

答案 1 :(得分:4)

尝试

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

getElementsByClass返回数组

答案 2 :(得分:1)

你是不是想要这样做?

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

答案 3 :(得分:1)

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

如果你想要&lt; img&gt; '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);
}

答案 4 :(得分:-2)

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

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

如果您想定位具有ID的特定元素,则可以使用以下调用:

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