javascript - getElementsByClassName onclick の問題

Question

Robert Nyman のスクリプトを使用して、ドキュメント内の同じクラスのすべての要素を取得していますが、onclick またはその他のイベントでは機能しません。

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

多分あなたはそれを修正する方法を知っていますか？ありがとう！

score 28 · Accepted Answer

写真は配列だと思います。その場合は、次のことを試してください。

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

score 6 · Accepted Answer

試す

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

getElementsByClass は配列を返します

score 2 · Accepted Answer

getElementsByClassName1 つのパラメータ (クラス名) を取り、ノードリストを返します

クラス名が「photo_class」の「photo_wrap」内の <img> 要素に同じイベントハンドラーを取得させたい場合は、次のようにすることができます

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

score -4 · Accepted Answer

jquery を使用すると、特定のクラスを持つすべての要素を簡単にターゲットにして、以下に示すように onclick イベントを割り当てることができます。

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

ID を持つ特定の要素をターゲットにしたい場合は、以下の呼び出しを使用できます。

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

javascript - getElementsByClassName onclick の問題

5 に答える 5

Related

Reference