Jak zdobyć bieżący element getElementsByClassName

Question

Rozważmy prosty zdarzenie JS z

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

Jak mogę przedłużyć ten kod na ogół pracy dla wszystkich elementów z class="test". Chodzi o to, aby element kliknął i zastąpił jego treść. W rzeczywistości musimy uzyskać numer węzła (podany w nawiasie) od zdarzenia kliknięcia.

Próbuję lepiej zrozumieć javascript w dyskretnych kodach, a nie praktyczne metody, takie jak jQuery.

Answer 1

Wystarczy iteracyjne nad nimi:

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

Użyłem (function(i) { return function() { ... }; })(i) zamiast tylko function() { ... } ponieważ jeśli masz pióro do użycia i w oddzwonieniu, wartość i będzie elements.length - 1 do czasu wywołania go. Aby to naprawić, musisz ukryć i i sprawić, by w gruncie rzeczy był przekazywany według wartości.

Answer 2

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

Ale to najbardziej zaleca się stosowanie addEventListener (lub attachEvent, w IE/Niektóre wersje Opery, myślę):

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

Answer 3

Wystarczy użyć this wewnątrz funkcji. this będzie elementem, na którym wydarzenie jest uruchamiane.

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

To trochę bardziej skomplikowane niż jQuery:

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

Ale to będzie znacznie szybciej bez wzdęć, że jQuery dodaje;)