browser non osservare modifiche al data-*, attributi CSS Proprietà del selettore non di rendering

Question

Dato questo CSS:

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

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

E questo jQuery:

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

E questo frammento di codice HTML:

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

Ora, ci si aspetterebbe che quando il frammento jQuery viene eseguito (correttamente differito fino al il caricamento della pagina è completo ovviamente) la mia finestra blu (che inizialmente viene visualizzata come blu) diventa rossa.

No, certamente no; e usando Firebug e Developer Tools rispettivamente in Firefox e Chrome, non posso osservare alcuna modifica agli attributi data-*.

Affinché il browser (e toolbox DOM è per questo) per osservare i cambiamenti, ho bisogno per tornare a .attr() o c'è una soluzione per questo?

Answer 1

Gli attributi jQuery.data() non vengono effettivamente memorizzati nell'oggetto DOM in jQuery. L'oggetto DOM viene contrassegnato con un ID jQuery univoco e i dati effettivi vengono archiviati in una struttura dati javascript separata. Tra le altre ragioni, jQuery fa in questo modo per evitare bug di perdita di memoria di riferimento circolare che possono verificarsi in alcuni browser quando i valori dei dati sono riferimenti ad altri oggetti DOM.

Se si desidera modificare l'attributo reale DOM, io suggerirei di impostare l'attributo direttamente da soli in questo modo:

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

Anche se, per quello che stai facendo, penso che la maggior parte delle persone sarebbe utilizzare l'aggiunta/rimuovendo/modificando i nomi delle classi CSS, non gli attributi personalizzati in quanto è il modo comune di cambiare quali regole CSS si applicano a un oggetto.

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

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

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

O se non ci sono altre classi sull'oggetto:

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