एचटीएमएल कक्षा नामों में कुंजी/मूल्य जोड़े का प्रतिनिधित्व करने का सबसे अच्छा तरीका

Question

मैं जावास्क्रिप्ट का उपयोग करके HTML ऑब्जेक्ट्स को बाध्यकारी कर रहा हूं और केवल वर्ग नामों की तुलना में थोड़ा अधिक परिष्कृत तंत्र की आवश्यकता है।

मेरा पहला दृष्टिकोण संरचना घोषणाओं जहां बंधन के रूप में इतना नाम स्थिति पर है की तरह वर्ग नामों का उपयोग करने के लिए किया गया था:

Definition = identifier: foo bar baz 

इस परिभाषा के साथ कुछ वर्ग के नाम एन्कोडिंग देता

<p id="someid" class="identifier bish bash bosh"> 
<div id="anotherid" class="identifier heebie jeebie"> 

यह तो कर सकते हैं के रूप में पढ़ें:

{foo: bish, bar: bash, baz: bosh}; 
{foo: heebie, bar: jeebie} 

ध्यान दें कि बाइंडिंग में अलग-अलग अंक हैं पैरामीटर के आरएस।

यह बहुत नाजुक है। मैं अतिरिक्त नामों के साथ किसी भी एचटीएमएल तत्वों को सजाने नहीं कर सकता (उदाहरण के लिए ड्रैग और ड्रॉप इत्यादि जैसे jQuery व्यवहार जोड़ने के लिए) और आम तौर पर थोड़ा सा शोर ...

मैं जो करना चाहता हूं वह उनका प्रतिनिधित्व करता है इसलिए जैसे प्रमुख मूल्य जोड़े:

<p id="someid" class="id{foo:bish} id{bar:bash} id{baz:bosh} random class"> 
<div id="anotherid" class="ui-draggable id{bar:jeebie} id{foo:heebie}"> 

मुझे यादृच्छिक स्थिति और मेरे आईडी प्रदान की तत्वों पर वर्ग नामों में से यादृच्छिक लंबाई की अनुमति देता है जो एक sorta GUID है (लेकिन मैं 'बनाने कि इतने' कर सकते हैं मैन्युअल रूप से आसानी से पर्याप्त ...)

अब, in theory, कक्षा नाम सीडीएटीए हैं, इसलिए सब कुछ टिकटी-बू होना चाहिए, लेकिन मैं hae ma doots! विशेष रूप से पुराने क्रॉस-ब्राउज़र पक्ष पर ...

सलाह, सुझाव, पूर्व कला, कक्षा के नामों में केवी जोड़े के लिए सर्वोत्तम वाक्यविन्यास पर सर्वोत्तम अभ्यास सभी कृतज्ञतापूर्वक प्राप्त हुए।

Answer 1

एचटीएमएल 5 इस डेटा के लिए डेटा- * विशेषताओं को जोड़ने जा रहा है, और ये पहले से ही हर ब्राउज़र में काम करते हैं (लेकिन एक लूप के लिए कुछ वैधकर्ता भेज सकते हैं)।

http://ejohn.org/blog/html-5-data-attributes/

<li class="user" data-name="John Resig" data-city="Boston" 
    data-lang="js" data-food="Bacon"> 
    <b>John says:</b> <span>Hello, how are you?</span> 
</li> 

Answer 2

allowed className characters आपको यह निर्धारित करने में मदद करेगा कि क्या उपयोग करना है।

मेरे लिए, मैं की तरह कुछ की ओर झुक जाएगा:

keys: soft, hard, wet, hot 
values: foo, bar, baz, fuzz 

class="soft_bar wet_foo hot_fuzz" 

विशेष रूप से, ब्रेसिज़ के रूप में वे सीएसएस स्टाइलशीट में उपयोग किया जाता शैली गुण के ब्लॉक चिह्नित करने के लिए {} काम नहीं करेगा।

Answer 3

यह आवश्यक है इस वर्ग में आप attr

$("#someid").attr("key_val", "id{foo:bish} id{bar:bash} id{baz:bosh}"); 

Answer 4

नई में कुंजी/मान के लिए एक डेटा बना सकते हैं ?, कि आप मान्य HTML के बारे में चिंतित नहीं हैं, तो आप सिर्फ बजाय मनमाने ढंग से विशेषता नाम इस्तेमाल कर सकते हैं "वर्ग" विशेषता को हाइजैक करने की कोशिश कर रहा है।

<p id="someid" foo="bish" bar="bash" baz="bosh"> 

और के माध्यम से jQuery से उनके मूल्यों का उपयोग:

$("#someid").attr("foo"); // "bish" 

Answer 5

आप एक div में विचाराधीन वस्तु के चारों ओर या अवधि सकते हैं? फिर नाम-मूल्य जोड़े को स्टोर करने और उन्हें मूल संपत्ति के साथ एक्सेस करने के लिए आईडी और/या क्लास विशेषताओं का उपयोग करें।

<span id="foo_bar_baz" class="bish_bash_bosh"><p id="someid"></span> 

यह आपको मूल वस्तु को जो भी करना चाहते हैं, करने की अनुमति देता है।