2015-07-28 16 views
9

Sono nuovo qui (e nuovo in JavaScript), quindi scusate le mie domande super base. Ho una pagina HTML con immagini diverse che condividono tutte una classe su di essa. Usando getElementsByClassName, ottengo un array. Voglio aggiungere un listener di eventi a ciascuna cella nell'array utilizzando la funzione .map().Javascript .map() non è una funzione

Questo è quello che ho:

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

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

Ciò mantiene che mostra l'errore "allImgs.map non è una funzione" anche quando cambio la funzione interna a qualcosa che non include il listener di eventi.

Ho un'altra versione di questo codice in cui ho appena fatto un ciclo attraverso le celle dell'array all'interno di window.onload e aggiungo il listener di eventi a ciascuno di essi in quel modo e funziona. Perché la funzione .map() non funziona? Non può essere usato in window.onload?

risposta

18

getElementsByClassName() restituisce un non HTMLCollection un Array. Bisogna convertirlo in un array JavaScript prima:

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

http://stackoverflow.com/questions/222841/most-efficient-way-to-convert-an-htmlcollection-to-an-array – baao

+0

Questo ha molto più senso ora, grazie. – JSn00b

+0

@ Flawyte Eek, non funziona ancora per me. Probabilmente sto trascurando qualcosa di super-base. Ecco cosa ho ottenuto: 'window.onload = function() { \t var allImgs = document.getElementsByClassName (" pft "); \t var newImgs = [] .slice.call (allImgs); \t console.log (newImgs.typeof); \t funzione newImgs.map ( \t \t \t (arrayCell) { \t \t \t \t ritorno arrayCell.addEventListener ("mouseover, flipOver"); \t \t \t} \t); }; ' – JSn00b

2

Utilizzando getElementsByClassName, ottengo un array.

No, non è così.

Ottiene un live HTMLCollection. Questo è come un array ma non è un array.

Poiché è sufficientemente array, è possibile applicare il metodo map da un array reale.

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

Oh capisco, grazie per averlo chiarito. quindi non potrei mai usare .map() su di esso perché non è un vero array? Ma posso ancora accedere alle sue celle così come lo otterrei da una matrice (come in htmlColls [i] .addEventListener; etc)? – JSn00b

3

Un'altra opzione sarebbe quella di utilizzare direttamente map:

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

Tuttavia, quello che stai facendo è meglio realizzato con Array.prototype.forEach.

Problemi correlati