données associant à un élément DOM jQuery

Question

Dans une vie antérieure, je aurais pu faire quelque chose comme ceci:

<a href="#" onclick="f(311);return false;">Click</a><br/> 
<a href="#" onclick="f(412);return false;">Click</a><br/> 
<a href="#" onclick="f(583);return false;">Click</a><br/> 
<a href="#" onclick="f(624);return false;">Click</a><br/> 

Maintenant, avec jQuery, je pourrais faire quelque chose comme ceci:

<a class="clicker" alt="311">Click</a><br/> 
<a class="clicker" alt="412">Click</a><br/> 
<a class="clicker" alt="583">Click</a><br/> 
<a class="clicker" alt="624">Click</a><br/> 

<script language="javascript" type="text/javascript"> 
    $(".clicker").bind("click", function(e) { 
     e.preventDefault(); 
     f($(this).attr("alt")); 
    }); 
</script> 

Sauf que l'utilisation de l'attribut alt pour transmettre les données du DOM à jQuery ressemble à un hack, puisque ce n'est pas son but. Quelle est la meilleure pratique ici pour stocker/cacher des données dans le DOM pour que jQuery puisse y accéder?

Answer 1

JQuery.data permet d'associer un dictionnaire à un élément DOM. Ces données peuvent être réglée via jQuery:

<a class="clicker">Click</a><br/> 
<a class="clicker">Click</a><br/> 
<a class="clicker">Click</a><br/> 
<a class="clicker">Click</a><br/> 

<script language="javascript" type="text/javascript"> 
    var values = new Array("311", "412", "583", "624"); 
    $(".clicker").each(function(i, e) { 
     $(this).data('value', values[i]).click(function(e) { 
     f($(this).data('value')); 
     }); 
    }); 
</script> 

ou (depuis jQuery 1.4.3) en utilisant le HTML5 data- attributes, qui fonctionne même dans les documents non-HTML5:

<a class="clicker" data-value="311">Click</a><br/> 
<a class="clicker" data-value="412">Click</a><br/> 
<a class="clicker" data-value="583">Click</a><br/> 
<a class="clicker" data-value="624">Click</a><br/> 

<script language="javascript" type="text/javascript"> 
    $(".clicker").click(function(e) { 
     f($(this).data('value')); 
    }); 
</script> 

Answer 2

Vous pouvez utiliser un attribut id comme "clicker-123" puis analyser le nombre. Je le fais habituellement ou utilise l'attribut 'rel'. Donc, pour l'essentiel, il n'y a pas de meilleure façon de le faire que je connaisse. J'espère que ce fil me prouve mal.

Answer 3

Je suis désolé, mais si vous êtes déjà en train de remplir la balise alt, je ne vois pas comment retarder l'affectation du gestionnaire onclick à jQuery vous achète quoi que ce soit. N'est-ce pas juste un cas de "Maintenant que j'ai un marteau, chaque problème ressemble à un clou." Je pense que la méthode jquery est mieux utilisée lorsque l'action ne dépend pas de données supplémentaires que ce qui peut naturellement être dérivé du contenu, par exemple, définition de classe, type de balise, etc

Answer 4

Vous utiliserez au mieux une nouvelle fonctionnalité de HTML5: l'attribut data-....

Votre code HTML ressemblera à ceci:

<a class="clicker" data-mynumber="311">Click</a> 

Ensuite, vous pouvez utiliser el.attr('data-mynumber') pour obtenir les données.

Au lieu de mynumber, vous pouvez choisir n'importe quel nom.

Cela fonctionne dans tous les navigateurs.