javascript - examples - jQuery mapeo de casos de camellos desde los nombres de los atributos de "datos" a las teclas ".data()"

jquery selector

Question

Si pones un atributo "datos-" en un elemento:

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

luego puede obtener el valor a través del método jQuery ".data ()":

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

La biblioteca utiliza un convertidor de casos de camellos consistente para los nombres de atributos con guiones integrados:

<div id=''x'' data-hello-world="hi">
alert($(''#x'').data("helloWorld"));

El convertidor camel-case es una función "global" de jQuery:

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

Sin embargo, todo esto se rompe cuando el nombre del 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"

¿Así que qué hay de malo? Creo que tiene algo que ver con el mecanismo usado para ir en la otra dirección, convirtiendo un nombre de caja de camello nuevamente en la forma discontinua. Sin embargo, no puedo señalarlo en el código.

Parece ser el mismo en 1.6.2 que en 1.6.3. (La forma "image-x-offset" puede usarse para obtener los datos, por cierto).

editar : si, para un elemento determinado, accede a través del formulario de guiones antes de intentar el formulario de caso de camello, entonces funciona (y eso me dice que esto es definitivamente un bug :-)

Answer 1

Tienes razón. El problema parece estar en la expresión regular que utilizan para la conversión de camelCase a discontinua.

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

... como se usa aquí :

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

...lo que resulta en:

data-image-xoffset

...en lugar de:

data-image-x-offset

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

Entonces, cuando usa la versión con guiones, 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 ahora está allí, por lo que ya no intenta obtenerlo como un atributo y, por lo tanto, ya no necesita la expresión regular defectuosa.