12

の単純なJSイベントを考えてみましょう

document.getElementsByClassName('test')[0].onclick=function(){
document.getElementsByClassName('test')[0].innerHTML = 'New Text';
}

このコードを拡張して、。を使用するすべての要素で一般的に機能するようにするにはどうすればよいですかclass="test"。要素をクリックしてそのコンテンツを置き換えることを意味します。実際、クリックイベントからノード番号（括弧内に表示）を取得する必要があります。

私は、jQueryのような実用的な方法ではなく、目立たないコードでJavascriptをよりよく理解しようとしています。

4

3 に答える 3

16

それらを繰り返すだけです：

var elements = document.getElementsByClassName('test');

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', (function(i) {
        return function() {
            this.innerHTML = 'New Text';
        };
    })(i), false);
}​

コールバックでたまたま使用した場合、の値は呼び出した時点でになるという理由だけでなく(function(i) { return function() { ... }; })(i)、使用しました。これを修正するには、シャドウを作成して、基本的に値を渡すようにする必要があります。function() { ... }iielements.length - 1i

于 2012-06-18T00:26:58.013 に答える
4

this関数内で使用するだけです。thisイベントが発生する要素になります。

(function() {
    var elms = document.getElementsByClassName("test"),
        l = elms.length, i;
    for( i=0; i<l; i++) {
        (function(i) {
            elms[i].onclick = function() {
                this.innerHTML = "New Text";
            };
        })(i);
    }
})();

jQueryよりも少し複雑です。

$(".test").click(function() {
    $(this).html("New Text");
});

しかし、jQueryが追加する肥大化がなければ、大幅に高速になります;）

于 2012-06-18T00:24:56.327 に答える
2 
var all = document.getElementsByClassName('test');
for(var i=0;i<all.length;i++)
    all[i].onclick=function(){
        this.innerHTML = 'New Text';
    }

ただし、addEventListener（または、IE / Operaの一部のバージョンではattachEvent）を使用することをお勧めします。

var all = document.getElementsByClassName('test');
for(var i=0;i<all.length;i++)
    all[i].addEventListener('click',function(){//If you're gonna use attachEvent, use 'onclick' instead of 'click'
        this.innerHTML = 'New Text';
    }});
于 2012-06-18T00:24:37.480 に答える