এইচটিএমএল উপাদানগুলির সাথে জাভাস্ক্রিপ্ট অবজেক্ট সংযুক্ত করার জন্য কি কোনও ভাল উপায় আছে?


96

আমি একটি জাভাস্ক্রিপ্ট অবজেক্টটি এইচটিএমএল উপাদানের সাথে সংযুক্ত করতে চাই। এটি করার কোন সহজ পথ আছে কি?

আমি লক্ষ্য করেছি যে এইচটিএমএল ডিওএম একটি সেটঅ্যাট্রিবিউট পদ্ধতি সংজ্ঞায়িত করে এবং মনে হচ্ছে এটি নির্বিচার বৈশিষ্ট্য নামের জন্য সংজ্ঞায়িত করা আছে। তবে এটি কেবল স্ট্রিংয়ের মান নির্ধারণ করতে পারে। (আপনি অবশ্যই অভিধানে কীগুলি সংরক্ষণ করতে এটি ব্যবহার করতে পারেন))

সুনির্দিষ্ট (যদিও আমি বেশিরভাগ সাধারণ প্রশ্নে আগ্রহী):

বিশেষত, আমার গাছে একটি নোডের প্রতিনিধিত্বকারী এইচটিএমএল উপাদান রয়েছে এবং আমি ড্রাগ-এন্ড-ড্রপ সক্ষম করার চেষ্টা করছি, তবে জিকুয়েরি ড্রপ ইভেন্টটি আমাকে কেবল উপাদানগুলি টেনে এনে নামিয়ে দেবে।

ইভেন্ট হ্যান্ডলারের কাছে তথ্য পাওয়ার স্বাভাবিক প্যাটার্নটি মনে হচ্ছে আপনি যেমন জাভাস্ক্রিপ্ট অবজেক্ট তৈরি করছেন ঠিক একই সময়ে এইচটিএমএল উপাদান তৈরি করা এবং তারপরে এই জাভাস্ক্রিপ্ট অবজেক্টগুলি বন্ধ করে ইভেন্ট হ্যান্ডলারগুলি সংজ্ঞায়িত করা - তবে এটি এতে খুব ভাল কাজ করে না doesn't কেস (আমার কাছে এমন একটি বিশ্বব্যাপী অবজেক্ট থাকতে পারে যা একটি টানা শুরু হওয়ার সাথে সাথে জনবহুল হয়ে যায় ... তবে এটি কিছুটা দুষ্টু মনে হয়)।

উত্তর:


44

আপনি কি jQuery ডেটা () পদ্ধতিটি দেখেছেন ? আপনি যদি চান তবে আপনি উপাদানটিকে জটিল বস্তুগুলি বরাদ্দ করতে পারেন বা আপনি খুব কমপক্ষে কোনও অবজেক্টের (বা অন্য কোনও ডেটা) রেফারেন্স রাখতে সেই পদ্ধতিটি উত্তোলন করতে পারেন।


8
আপনাকে ধন্যবাদ: আমি যা খুঁজছিলাম তা এটি অনেকটাই। আকর্ষণীয়ভাবে প্রতিটি পদ্ধতির স্ট্রিং অ্যাট্রিবিউটে এই পদ্ধতিটি jquery স্টোর কীগুলি বিশ্বব্যাপী অভিধানে সংজ্ঞায়িত করতে আগ্রহী। এই স্ট্রিং অ্যাট্রিবিউটটির নাম এলোমেলোভাবে উত্পন্ন হয় যখন jquery প্রথম লোড হয়। (কেবলমাত্র ডম ব্যবহার করে এটি করার সর্বোত্তম উপায় নেই বলে পরামর্শ দেওয়া হচ্ছে)
ব্যবহারকারীর 47741

6
এটা তোলে এর লক্ষ যে jQuery এর মূল্য data() কাজ ব্যবহার করে উত্তর bobince দিয়েছেন তাই যদি আপনি ইতিমধ্যে jQuery ব্যবহার করছেন না, আপনি ভাল হিসাবে ব্যবহার হতে পারে।
ইমন নারবোনে

6
6 বছর পরে আমি কীভাবে এই উত্তরটি ফিরে দেখতে পারি এবং ভাবতে পারি, "এটি একটি খুব সাব-অনুকূল উত্তর @ @ ববিন্সের গ্রহণযোগ্য উত্তর থাকা উচিত"।
ফিল.ওহিলার

6
এই প্রশ্নে কোন jQuery ট্যাগ নেই।
মিশা পেরেকোভস্কি

112

জাভাস্ক্রিপ্ট অবজেক্টগুলিতে তাদের নির্ধারিত নির্বিচার বৈশিষ্ট্য থাকতে পারে, এটির অনুমতি দেওয়ার জন্য আপনাকে বিশেষ কিছু করতে হবে না। এর মধ্যে ডোম উপাদান রয়েছে; যদিও এই আচরণটি ডিওএম স্ট্যান্ডার্ডের অংশ না, তবে এটি জাভাস্ক্রিপ্টের প্রথম সংস্করণে ফিরে যাওয়ার ঘটনা এবং এটি সম্পূর্ণ নির্ভরযোগ্য।

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

6
@ ট্যাট.ওয়াইট - এইচটিএমএল উপাদানগুলির যে স্বতন্ত্র বৈশিষ্ট্য তিনি বলছেন তাকে এক্সপ্যান্ডো বৈশিষ্ট্য বলা হয়। আরও মনে রাখবেন যে Div.potato এর অর্থ div.getAttribute ("আলু") নয়
নিকোটনলাইন

37
@ টিম ডাউন: তবে কেবল এটি করবেন না। কেন এটি নির্ভরযোগ্য নয় তা আমি দেখতে ব্যর্থ হয়েছি - এটি স্ট্রিং অবজেক্টটি অবিশ্বাস্য বলে দেওয়ার মতো, কারণ আপনি এটি বাতিল করতে পারেন।
সাইমন

5
@ টিমডাউন: তবে jQuery.datadocument.expando = false ব্রেক করবে না ?
জোয়ে অ্যাডামস

8
আমার অভিজ্ঞতা থেকে এটি খারাপ হওয়ার কারণটি সম্ভব মেমরি ফুটো memory এটি এড়ানোর সহজ উপায় থাকতে পারে তবে আমি যখন এমন একটি ডিজাইন তৈরি করেছি যা এটি ভারী ব্যবহার করে তখন এতে অনেকগুলি মেমরি ফাঁস হয়। আমি মনে করি আপনাকে অতিরিক্ত সতর্কতা অবলম্বন করতে হবে কারণ উপাদানটি পৃষ্ঠাটি থেকে সরানো থাকলে এবং সম্ভবত ভিসা-বিপরীতে আপনার রেফারেন্স গণনা পরিচালনা করা হয় না (পরিষ্কার করা হয় না)।
eselk

8
সুষ্ঠু সতর্কতা: উত্তরে যা বর্ণিত হয়েছে তা আমি খুশিতে করছিলাম তবে ক্ষেত্রের নাম "আলু" এর পরিবর্তে আমি "সুযোগ" ব্যবহার করছিলাম। "স্কোপ" সারণীতে সারণি কোষের উপাদানগুলির একটি বৈশিষ্ট্য ( <td>) এবং আমি এই ক্ষেত্রটিতে নিযুক্ত করা বস্তুটি # toString'ed ছিল। Td.scope === '[অবজেক্ট অবজেক্ট]' দেখে আমি খুব বিভ্রান্ত হয়ে পড়েছিলাম।
ডেভিড গ্রুমস 21
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.