2011-09-02 4 views
19

Si se pone un 'Data-' atributo de un elemento:jQuery mapeo de camello caso de "Data-" nombres de atributo a ".data()" claves

<div id='x' data-key='value'> 

entonces se puede obtener el valor medio de

alert($('#x').data('key')); // alerts "value" 

la biblioteca utiliza un convertidor de camello caso consistente para nombres de atributo con guiones incrustados::

<div id='x' data-hello-world="hi"> 

alert($('#x').data("helloWorld")); 

el camello el método jQuery ".data()" Conversor de -case es una función jQuery "global":

alert($.camelCase("hello-world")); // alerts "helloWorld" 

Sin embargo, esto todo se derrumba cuando el nombre de atributo tiene un nombre con una sola letra rodeada de guiones:

<div id='x' data-image-x-offset='50px'> 

alert($('#x').data('imageXOffset')); // undefined 

Eso es un poco raro, porque:

alert($.camelCase('image-x-offset')); // "imageXOffset" 

¿Qué pasa? Creo que tiene algo que ver con el mecanismo utilizado para ir a la dirección other, convirtiendo un nombre ya camel-case nuevamente en el formato punteado. Sin embargo, no puedo precisarlo en el código.

Parece ser el mismo en 1.6.2 que en 1.6.3. (La forma de "imagen-desplazamiento x" puede ser utilizado para obtener los datos, por cierto.)

edición — si, por un elemento dado, se accede a través de la forma discontinua antes intentar el camello -forma de caso, entonces funciona (y eso me dice que esto es definitivamente un bug :-)

+1

jQuery informe de error aquí: http://bugs.jquery.com/ticket/10194 (enviado por @Pointy) –

+0

jsFiddle para usted: http://jsfiddle.net/hJDLY/1/. Limpio, parece que el OP hizo ese informe de error!:-P – numbers1311407

+0

¡Gracias a todos! Esto comió mi mañana:/ – Pointy

Respuesta

14

Tienes razón. El problema parece ser con la expresión regular que usan para la conversión de camelCase a discontinua.

rmultiDash = /([a-z])([A-Z])/g; 

... as used here:

var name = "data-" + key.replace(rmultiDash, "$1-$2").toLowerCase(); 

... que se traduce en:

data-image-xoffset 

... en lugar de:

data-image-x-offset 

Demostración:http://jsfiddle.net/TLnaW/

Así que cuando utiliza la versión discontinua, cuando busca un atributo, lo encuentra sin necesidad de una conversión, y luego agrega la versión camelCase a los datos de elementos en jQuery.cache.

Los intentos subsiguientes funcionarán porque el camelCase correcto ya está allí, por lo que ya no intenta obtenerlo como atributo, y por lo tanto ya no necesita la expresión regular defectuosa.

+1

Me quedé mirando eso cuando lo vi antes, pero me equivoqué al tratar de averiguar qué harían exactamente, gracias. – Pointy