2015-07-28 10 views
9

मैं यहां नया हूं (और जावास्क्रिप्ट पर नया), इसलिए कृपया मेरे सुपर मूल प्रश्नों को क्षमा करें। मेरे पास एक अलग-अलग छवियों वाला एक HTML पृष्ठ है जो सभी उस पर एक वर्ग साझा करते हैं। GetElementsByClassName का उपयोग करके, मुझे एक सरणी मिलती है। मैं .map() फ़ंक्शन का उपयोग कर सरणी में प्रत्येक कक्ष में इवेंट श्रोता जोड़ना चाहता हूं।जावास्क्रिप्ट .map() कोई फ़ंक्शन नहीं है

यह है कि मैं क्या है:

window.onload = function(){ 
var allImgs = document.getElementsByClassName("pft"); 

var newImgs = allImgs.map(
     function(arrayCell){ 
      return arrayCell.addEventListener("mouseover, functionName"); 
     } 
    ); 
}; 

यह त्रुटि दिखा रहता है "allImgs.map कार्य नहीं है" यहां तक ​​कि जब मैं कुछ करने के लिए आंतरिक समारोह को बदलने कि घटना श्रोता शामिल नहीं है।

मेरे पास इस कोड का एक और संस्करण है जहां मैं खिड़की के भीतर सरणी कक्षों के माध्यम से लूप करता हूं। इस तरह से प्रत्येक को ईवेंट श्रोता जोड़ें और यह काम करता है। .map() फ़ंक्शन क्यों काम नहीं कर रहा है? क्या इसका उपयोग विंडो में नहीं किया जा सकता है।

उत्तर

18

getElementsByClassName() एक HTMLCollection नहीं एक Array देता है। आप JavaScript शृंखला में यह पहली कन्वर्ट करने के लिए है: तुम क्या कर रहे बेहतर Array.prototype.forEach साथ हासिल की है,

[].map.call(allImages, function() { ... }); 

हालांकि:

allImgs = Array.prototype.slice.call(allImgs); 
// or 
allImgs = [].slice.call(allImgs); 
// or 
allImgs = Array.from(allImgs); 
+0

http://stackoverflow.com/questions/222841/most- कुशल-way-to-convert-an-htmlcollection-to-an-array – baao

+0

यह अब बहुत अधिक समझ में आता है, धन्यवाद। – JSn00b

+0

@ Flawyte Eek, यह अभी तक मेरे लिए काम नहीं कर रहा है। मैं शायद कुछ सुपर मूल देख रहा हूँ। यहां मुझे जो मिला है: 'window.onload = function() { \t var allImgs = document.getElementsByClassName (" pft "); \t var newImgs = [] .slice.call (allImgs); \t console.log (newImgs.typeof); \t newImgs.map ( \t \t \t समारोह (arrayCell) { \t \t \t \t वापसी arrayCell।addEventListener ("माउसओवर, फ्लिपओवर"); \t \t \t} \t); }; ' – JSn00b

2

getElementsByClassName का उपयोग करके, मुझे एक सरणी मिलती है।

नहीं, आप नहीं करते हैं।

आपको लाइव HTMLCollection मिलता है। यह सरणी जैसा है लेकिन एक सरणी नहीं है।

चूंकि यह पर्याप्त सरणी जैसा है, इसलिए आप वास्तविक सरणी से map विधि लागू कर सकते हैं।

var text_content = [].map.call(
 
     document.getElementsByClassName("sdf"), 
 
     function (currentValue, index, collection) { 
 
     return currentValue.innerHTML; 
 
     } 
 
    ); 
 
    console.log(text_content);
<p class="sdf">foo</p> 
 
    <p class="sdf"></p> 
 
    <p class="sdf">bar</p> 
 
    <p class="sdf"></p> 
 
    <p class="sdf"></p> 
 
     

+0

ओह मैं देखता हूं, इसे साफ़ करने के लिए धन्यवाद। इसलिए मैं कभी भी .map() का उपयोग नहीं कर सकता क्योंकि यह एक वास्तविक सरणी नहीं है? लेकिन मैं अभी भी अपनी कोशिकाओं तक पहुंच प्राप्त कर सकता हूं जिस तरह से मैं इसे एक सरणी से प्राप्त करूंगा (जैसे HTMLColls [i] .addEventListener; आदि)? – JSn00b

3

एक अन्य विकल्प सीधे map उपयोग करने के लिए किया जाएगा।

संबंधित मुद्दे