6

この小さなタスクにjqueryを使用したくありません。

HTML

<form action="" method="post" >
    <input type="button" id="btn_1" class="cls_btn" value="Click Me" />
    <input type="button" id="btn_2" class="cls_btn" value="Click Me" />
    <input type="button" id="btn_3" class="cls_btn" value="Click Me" />
</form>

JavaScript

クリックしたときのボタンのIDが欲しい。
私のjsコードは次のようになります

<script >
    document.getElementsByClassName('cls_btn').onclick = function(){
        alert(this.id);
    };
</script>
4

4 に答える 4

8

document.getElementsByClassNameDOM オブジェクトのリストを返します。.onclickhtml アイテムのコレクションに適用しても何も起こりません。エラーはスローされませんが、期待される結果は表示されません。

これを試して：

var buttons = document.getElementsByClassName('cls_btn');

for (var i = 0; i < buttons.length; i++){
    buttons[i].onclick = function(){ alert(this.id) };
}

ここを参照してください: JSFiddle

この小さなタスクにjqueryを使用したくありません。

jQuery は同じループを処理できることに注意してください。リストを反復処理する必要はありません。セレクターを指定するだけで、それが実行されます。

$('.cls_btn').click(function() {
  console.log($(this).attr('id'));
});

ここを参照してください: JSFiddle (jq)

于 2013-09-30T10:48:03.643 に答える
6

getElementsByClassNameDOM 要素のリストを返すので、それをループして、それぞれにイベント リスナーを追加する必要があります。

var buttons = document.getElementsByClassName('cls_btn');
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
        alert(this.id);
    });
}

ワーキングデモ

于 2013-09-30T10:45:12.920 に答える
1

あなたはこれを使うことができます | jqueryデモなし

window.onload=function(){
    var ele = document.getElementsByClassName('cls_btn');
    for(var i=0;i<ele.length;i++)
    {
        addEventHandler(ele[i],'click',doWhatever);
    }
}
function addEventHandler(elem,eventType,handler) {
 if (elem.addEventListener) // for rest of browsers
     elem.addEventListener (eventType,handler,false);
 else if (elem.attachEvent) // for IE
     elem.attachEvent ('on'+eventType,handler); 
}
function doWhatever()
{
  // do whaterver you want
  alert(this.id);   
}
于 2013-09-30T10:56:39.380 に答える