瀏覽器不遵守變化不渲染

數據 - *，CSS屬性選擇屬性鑑於這種CSS：瀏覽器不遵守變化不渲染

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

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

這jQuery的：

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

而這個HTML片段：

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

現在，人們會期望，當執行jQuery代碼片段（正確地推遲到頁面加載完成當然是）我的藍色窗口（最初呈現爲藍色）會變成紅色。

不，它當然不會;並分別在Firefox和Chrome中使用Firebug和開發工具，我無法觀察data-*屬性的任何更改。

爲了使瀏覽器（和DOM工具箱在這方面）觀察到的變化，我需要恢復到.attr()或有沒有解決方法嗎？

來源

2011-09-18 Dan

jQuery.data()屬性實際上並不存儲在jQuery的DOM對象中。 DOM對象使用唯一的jQuery ID進行標記，實際數據存儲在單獨的javascript數據結構中。除其他原因之外，jQuery通過這種方式來防止當數據值引用其他DOM對象時，在某些瀏覽器中可能發生的循環引用內存泄漏錯誤。

如果你想改變實際的DOM屬性，我建議你直接自己設置屬性是這樣的：

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

雖然，你在做什麼，我想大多數人會使用添加/刪除/更改CSS類名稱，而不是自定義屬性，因爲這是更改將哪些CSS規則應用於對象的常用方法。

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

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

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

或者有物體上沒有其它類：

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

來源

2011-09-18 00:13:44 jfriend00

感謝@ jfriend00 - CSS類顯然是專門的造型元素的情況下更合適，但我工作的一個插件，並希望根據自定義屬性的語義相關性實現一些默認樣式（*與佈局相關*）這些當然是打算用更高特異性的CSS選擇器（*，例如'.classes' *）覆蓋。在任何如果'.attr（）'方法是我最好的選擇，那麼這就是我要去的方向。 .data（）是否提供了可能因此更改而丟失的任何其他基礎功能？（*除了支持地圖等*） – Dan

我知道'.data（）'的主要額外性功能與使用除簡單字符串以外的內容（例如對象引用）時的內存鏈接有關。它不僅可以阻止循環DOM引用，而且還可以確保通過'.data（）'引用任何具有引用的東西，如果通過jQuery刪除DOM對象，它們都會被清除。如果您只是使用字符串，我認爲它不會爲您提供更多附加功能。如果你做了很多，你可能想看看DOM屬性與jQuery方式的性能和內存使用情況。 – jfriend00

瀏覽器不遵守變化不渲染

回答

相關問題