Asociar datos a un elemento DOM para jQuery

Question

En una vida anterior, podría haber hecho algo como esto:

<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/> 

Ahora con jQuery, podría hacer algo como esto:

<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> 

Excepto que usar el atributo alt para pasar los datos del DOM a jQuery parece un truco, ya que ese no es su propósito. ¿Cuál es la mejor práctica aquí para almacenar/ocultar datos en el DOM para que jQuery pueda acceder?

Answer 1

JQuery.data le permite asociar un diccionario a un elemento DOM. Estos datos se pueden ajustar a través de 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> 

o (desde jQuery 1.4.3) utilizando el HTML5 data- attributes, que funciona incluso en documentos que no son de 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

Puede usar un atributo de id como "clicker-123" y luego analizar el número. Normalmente hago eso o uso el atributo 'rel'.

Así que, en esencia, no hay mejor manera de hacerlo que yo sepa. Espero que este hilo me demuestre que estoy equivocado.

Answer 3

Lo siento, pero si usted ya está completando la etiqueta alt, no veo cómo retrasar la asignación del manejador onclick a jQuery realmente le compra algo. ¿No es solo un caso de "Ahora que tengo un martillo, cada problema parece un clavo"? Creo que el método jquery se usa mejor cuando la acción no depende de datos adicionales de los que pueden derivarse naturalmente del contenido, por ejemplo, definición de clase, tipo de etiqueta, etc.

Answer 4

Lo mejor será usar una nueva función de HTML5: el data-... -tributo.

Su código HTML se verá así:

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

continuación, puede utilizar el.attr('data-mynumber') para obtener los datos.

En lugar de mynumber, puede elegir cualquier nombre.

Esto funciona en todos los navegadores.