.click() callback référence la variable locale de la méthode appelante au lieu de la copier par valeur

Question

Le code Javascript jQuery suivant est inclus sur une page autrement vide.

var element; 
$(function() { 
    for (var i = 0; i < 10; i++) { 
    element = $('<div>' + i + '</div>'); 
    element.click(function() { 
     alert(i); 
    }); 
    $('body').append(element); 
    } 
}); 

Le comportement souhaité est que ce code devrait générer 10 éléments div numérotés de 0 à 9. Lorsque vous cliquez sur un élément div, un message d'alerte affiche le numéro de l'élément div que vous avez cliqué sur (si un utilisateur clique sur l'élément div étiqueté '4', le popup d'alerte devrait montrer le numéro 4).

La fenêtre d'alerte affiche à la place le chiffre 10, quel que soit l'élément div cliqué.

Comment puis-je modifier ce code pour qu'il se comporte de la manière souhaitée?

Answer 1

Vous devez transmettre la variable en tant que paramètre de fonction.

Par exemple:

function buildElement(i) { 
    var element = $('<div>' + i + '</div>'); 
    element.click(function() { 
     alert(i); 
    }); 
    $('body').append(element); 
} 

$(function() { 
    for (var i = 0; i < 10; i++) { 
     buildElement(i); 
    } 
}); 

Vous pouvez aussi le faire avec une fonction anonyme en ligne, comme ceci:

$(function() { 
    for (var i = 0; i < 10; i++) { 
     (function(i) { 
      var element = $('<div>' + i + '</div>'); 
      element.click(function() { 
       alert(i); 
      }); 
      $('body').append(element); 
     })(i); 
    } 
}); 

Answer 2

Habituellement je cacher le numéro dans un id et le faire dans certains structuré chemin:

$(function() { 
    for (var i = 0; i < 10; i++) { 
     element = $('<div id="id-'+i+'">' + i + '</div>'); 
     element.click(function() { 
      alert($(this).attr('id').split('-')[1]); 
     }); 
     $('body').append(element); 
    } 
}); 

Answer 3

Vous pouvez faire 1 de deux choses. Vous pouvez utiliser le contenu de la div pour afficher ou vous pouvez saisir l'index dans le tableau à partir d'un sélecteur.

Voici un exemple du contenu:

element.click(function() { 
    alert($(this).text()); 
}); 

Ou pour l'indice:

element.click(function() { 
    alert($('div').index(this)); 
}); 

Je crois que les deux devraient travailler