जावास्क्रिप्ट तत्वों को HTML तत्वों में संलग्न करने का एक अच्छा तरीका है?

Question

मैं एक HTML ऑब्जेक्ट के साथ एक जावास्क्रिप्ट ऑब्जेक्ट को जोड़ना चाहता हूं। क्या ऐसा करने के लिए एक सरल तरीका है?

मैंने देखा है कि HTML DOM एक सेटअट्रिब्यूट विधि को परिभाषित करता है और ऐसा लगता है कि इसे मनमाने ढंग से विशेषता नाम के लिए परिभाषित किया गया है। हालाँकि यह केवल स्ट्रिंग मान सेट कर सकता है। (आप निश्चित रूप से एक शब्दकोश में कुंजियों को संग्रहीत करने के लिए इसका उपयोग कर सकते हैं।)

विशेषण (हालाँकि मैं सामान्य प्रश्न में दिलचस्पी रखता हूँ):

विशेष रूप से, मेरे पास HTML तत्व हैं जो एक पेड़ में नोड्स का प्रतिनिधित्व करते हैं और मैं ड्रैग-एंड-ड्रॉप को सक्षम करने की कोशिश कर रहा हूं, लेकिन jQuery ड्रॉप इवेंट केवल मुझे तत्वों को घसीटा और गिराया जाएगा।

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

Answer 1

क्या आपने jQuery डेटा () विधि को देखा है? यदि आप चाहें तो आप जटिल वस्तुओं को तत्व को सौंप सकते हैं या बहुत कम से कम किसी वस्तु (या कुछ अन्य डेटा) का संदर्भ रखने के लिए उस पद्धति का लाभ उठा सकते हैं।

Comments

धन्यवाद: यह बहुत ज्यादा है जो मैं देख रहा था। दिलचस्प रूप से इस पद्धति को परिभाषित करने के लिए jquery प्रत्येक तत्व पर एक स्ट्रिंग विशेषता में एक वैश्विक शब्दकोश में चाबियाँ संग्रहीत करता है। इस स्ट्रिंग विशेषता का नाम बेतरतीब ढंग से उत्पन्न होता है जब jquery पहली बार भरी जाती है। (यह सुझाव देते हुए कि ऐसा करने का एक अच्छा तरीका नहीं है, यह केवल DOM का उपयोग करने का एक अच्छा तरीका नहीं है)

— user47741

यह ध्यान देने योग्य बात है कि उत्तर bobince का उपयोग करके jQuery के data() काम करता है इसलिए यदि आप पहले से ही jquery का उपयोग नहीं कर रहे हैं, तो आप ऐसा कर सकते हैं।

— Eamon Nerbonne

मजेदार यह है कि मैं 6 साल बाद इस उत्तर पर वापस कैसे देख सकता हूं और सोचता हूं, "यह एक बहुत ही उप-इष्टतम जवाब है। @ बॉबिन को स्वीकार करना चाहिए"।

— फिल.हेलर

इस प्रश्न में कोई jQuery टैग नहीं है।

— मिशेल पेरोलाकोस्की

Answer 2

जावास्क्रिप्ट ऑब्जेक्ट्स में मनमाने ढंग से दिए गए गुण हो सकते हैं, इसे अनुमति देने के लिए आपको कुछ विशेष नहीं करना है। इसमें DOM तत्व शामिल हैं; हालाँकि यह व्यवहार DOM मानक का हिस्सा नहीं है, लेकिन यह जावास्क्रिप्ट के पहले संस्करणों में वापस जाने का मामला है और पूरी तरह से विश्वसनीय है।

var div= document.getElementById('nav');
div.potato= ['lemons', 3];

Comments

@ tat.wright - HTML तत्वों पर मनमाने गुण वह बोल रहे हैं जिन्हें विस्तार गुण कहा जाता है। यह भी ध्यान रखें कि div.potato का अर्थ div.getAttribute ("आलू") नहीं है

— निकोटीनलाइन

@ नीचे नीचे: तो बस यह मत करो। मैं यह देखने में विफल हूं कि यह विश्वसनीय क्यों नहीं है - यह कहने जैसा है कि स्ट्रिंग ऑब्जेक्ट अविश्वसनीय है, क्योंकि आप इसे शून्य पर सेट कर सकते हैं।

— सिमोन

@TimDown: लेकिन स्थापना के नहीं होंगे document.expando = falseतोड़ jQuery.data भी?

— जोए एडम्स

मेरे अनुभव से यह खराब हो सकता है इसका कारण मेमोरी लीक है। इससे बचने का एक आसान तरीका हो सकता है, लेकिन जब मैंने एक ऐसा डिज़ाइन बनाया, जिसने इसे बहुत अधिक उपयोग किया तो इसमें कई मेमोरी लीक थे। मुझे लगता है कि आपको अतिरिक्त सावधान रहना होगा क्योंकि यदि पृष्ठ से तत्व हटा दिया गया है, और शायद वीज़ा-वर्सा के लिए संदर्भ गणना आपके लिए (साफ़ नहीं की गई) संभाला नहीं है।

— जेने

निष्पक्ष चेतावनी: मैं खुशी से कर रहा था जो उत्तर का वर्णन करता है, लेकिन क्षेत्र के नाम "आलू" के बजाय मैं "गुंजाइश" का उपयोग कर रहा था। "गुंजाइश" निकलता है टेबल सेल तत्वों ( <td>) की एक विशेषता है और जिस ऑब्जेक्ट को मैंने इस क्षेत्र को सौंपा है वह #String'ed था। मुझे td.scope === '[ऑब्जेक्ट ऑब्जेक्ट]' देखकर बहुत उलझन हुई।

— डेविड ग्रूमेस 21