Navegadores no observar cambios en Data- *, Propiedades de selector de atributos CSS No volviendo

Question

Dado este CSS:

[data-myplugin-object="blue-window"]{ 
    background-color: #00f; 
} 

[data-myplugin-object="red-window"]{ 
    background-color: #f00; 
} 

Y esto jQuery:

$('[data-myplugin-object="blue-window"]').each(function(event){ 
    $(this).data({ 
     'myplugin-object': 'red-window' 
    }); 
}); 

Y este fragmento HTML:

<div data-myplugin-object="blue-window"> 
    <p>Hello world</p> 
</div> 

Ahora, uno esperaría que cuando se ejecuta el fragmento jQuery (se aplaza apropiadamente hasta la carga de la página se completa, por supuesto,) mi ventana azul (que inicialmente se procesa como azul) se volvería roja.

No, ciertamente no; y el uso de Firebug y Developer Tools en Firefox y Chrome respectivamente, no puedo observar ningún cambio en los atributos data-*.

Para que el navegador (y cajas de herramientas DOM para el caso) para observar los cambios, necesito para volver a .attr() o hay una solución para esto?

Answer 1

jQuery.data() atributos no se almacenan realmente en el objeto DOM en jQuery. El objeto DOM está etiquetado con una ID de jQuery única y los datos reales se almacenan en una estructura de datos de JavaScript separada. Entre otras razones, jQuery lo hace de esta manera para evitar errores de fuga de memoria de referencia circular que pueden ocurrir en algunos navegadores cuando los valores de datos son referencias a otros objetos DOM.

Si desea cambiar el atributo DOM real, sugeriría estableciendo el atributo directamente a sí mismo de esta manera:

obj.attr("data-myplugin-object", "red-window"); 

Aunque, por lo que está haciendo, creo que la mayoría de la gente utiliza la adición/eliminar/cambiar los nombres de las clases de CSS, no los atributos personalizados, ya que esa es la forma común de cambiar qué reglas de CSS se aplican a un objeto.

<div id="myObj" class="blueWindow"> 
    <p>Hello world</p> 
</div> 

.blueWindow {background-color: #00F;} 
.redWindow {background-color: #F00;} 

$("#myObj").removeClass("blueWindow").addClass("redWindow"); 

O si no hay otras clases de objeto:

$("#myObj").attr("class", "redWindow");