ब्राउज़र

Question

से प्रस्तुत नहीं हो डेटा- *, सीएसएस विशेषता चयनकर्ता गुण में परिवर्तन को देख नहीं देखते हुए इस सीएसएस:

[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 स्निपेट निष्पादित किया जाता है (ठीक से स्थगित पृष्ठ लोड पाठ्यक्रम से भरा हुआ है) मेरी नीली खिड़की (जो प्रारंभ में नीली के रूप में प्रस्तुत करती है) लाल हो जाएगी।

नहीं, यह निश्चित रूप से नहीं करता है; और क्रमशः फ़ायरफ़ॉक्स और क्रोम में फ़ायरबग और डेवलपर टूल्स का उपयोग करके, मैं data-* विशेषताओं में कोई भी परिवर्तन नहीं देख सकता।

ब्राउज़र (और उस बात के के लिए डोम toolboxes) परिवर्तन का पालन करने के लिए आदेश में, मैं .attr() पर वापस लौटना होगा या इसके लिए एक समाधान है?

Answer 1

jQuery.data() विशेषताएँ वास्तव में jQuery में DOM ऑब्जेक्ट पर संग्रहीत नहीं हैं। DOM ऑब्जेक्ट को एक अद्वितीय jQuery आईडी के साथ टैग किया गया है और वास्तविक डेटा एक अलग जावास्क्रिप्ट डेटा संरचना में संग्रहीत किया जाता है। अन्य कारणों से, jQuery सर्कुलर रेफरेंस मेमोरी लीक बग को रोकने के लिए ऐसा करता है जो कुछ ब्राउज़रों में हो सकता है जब डेटा मान अन्य डीओएम ऑब्जेक्ट्स के संदर्भ में होते हैं।

आप वास्तविक DOM विशेषता बदलना चाहते हैं, मैं विशेषता सीधे अपने आप को इस तरह की स्थापना का सुझाव चाहते हैं:

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

हालांकि, आप क्या कर रहे हैं, मुझे लगता है कि ज्यादातर लोगों को जोड़ने का प्रयोग करेंगे/सीएसएस वर्ग के नामों को हटाने/बदलने, कस्टम विशेषताओं के रूप में नहीं, क्योंकि यह बदलने का एक आम तरीका है कि कौन से सीएसएस नियम किसी ऑब्जेक्ट पर लागू होते हैं।

<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");