कैसे getElementsByClassName

Question

में वर्तमान तत्व प्राप्त करने के लिए

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

का एक सरल जे एस घटना पर विचार करें मैं कैसे विस्तार कर सकते हैं इस कोड को आम तौर पर class="test" साथ सभी तत्वों के लिए काम करने के लिए। मेरा मतलब है तत्व को क्लिक करना और इसकी सामग्री को प्रतिस्थापित करना। वास्तव में, हमें क्लिक ईवेंट से नोड नंबर (ब्रैकेट के अंदर प्रदान किया गया) प्राप्त करने की आवश्यकता है।

मैं जावास्क्रिप्ट जैसे व्यावहारिक विधि नहीं, अविभाज्य कोड में जावास्क्रिप्ट को बेहतर ढंग से समझने की कोशिश कर रहा हूं।

Answer 1

बस उन पर पुनरावृति:

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() { ... } के बजाय (function(i) { return function() { ... }; })(i) का उपयोग किया क्योंकि यदि आप कॉलबैक में i का उपयोग करने के लिए कलम, i का मान elements.length - 1 होगा जब आप इसे कॉल करेंगे। इसे ठीक करने के लिए, आपको i छाया करना होगा और इसे अनिवार्य रूप से मूल्य से गुजरना होगा।

Answer 2

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

लेकिन यह सबसे addEventListener उपयोग करने के लिए अनुशंसा की जाती है (या attachEvent, IE में/ओपेरा के कुछ संस्करणों, मुझे लगता है):

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

बस समारोह के अंदर 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 कहते हैं बिना हो जाएगा;)