কীভাবে jQuery ব্যবহার করে কোনও উপাদানের শিরোনামের বৈশিষ্ট্য পরিবর্তন করতে হয়


226

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

উত্তর:


463

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

বর্তমানের সেরা অনুশীলনটি হ'ল বৈশিষ্ট্যগুলির সাথে কাজ করা এড়াতে যদি না সেগুলি কাস্টম হয় বা এটির পরিপূরক হিসাবে কোনও সমতুল্য সম্পত্তি না থাকে। যেহেতু অনেকগুলি titleপড়ার / লেখার সম্পত্তি হিসাবে প্রকৃতপক্ষে বিদ্যমান HTMLElement, তাই আমাদের এটির সুবিধা নেওয়া উচিত।

আপনি এখানে বা এখানে বৈশিষ্ট্য এবং বৈশিষ্ট্যের মধ্যে পার্থক্য সম্পর্কে আরও পড়তে পারেন ।

এই বিষয়টি মাথায় রেখে, আসুন আমরা এটি চালিত করি title...

JQuery ছাড়াই কোনও উপাদানের titleসম্পত্তি পান বা সেট করুন

যেহেতু titleএকটি সর্বজনীন সম্পত্তি, আপনি এটি কোনও ডিওএম উপাদানের উপর সেট করতে পারেন যা এটি সরল জাভাস্ক্রিপ্ট দ্বারা সমর্থন করে:

document.getElementById('yourElementId').title = 'your new title';

পুনরুদ্ধার প্রায় অভিন্ন; এখানে বিশেষ কিছু নেই:

var elementTitle = document.getElementById('yourElementId').title;

আপনি যদি একটি অপ্টিমাইজেশন বাদাম হন তবে এটি শিরোনাম পরিবর্তনের দ্রুততম উপায় হবে তবে আপনি যেহেতু jQuery এর সাথে যুক্ত ছিলেন:

JQuery (v1.6 +) দিয়ে কোনও উপাদানের title সম্পত্তি পান বা সেট করুন

jQuery বৈশিষ্ট্য পেতে এবং সেট করতে v1.6 এ একটি নতুন পদ্ধতি প্রবর্তন করেছিল। titleকোনও উপাদানটিতে সম্পত্তি সেট করতে , ব্যবহার করুন:

$('#yourElementId').prop('title', 'your new title');

আপনি যদি শিরোনামটি পুনরুদ্ধার করতে চান তবে দ্বিতীয় প্যারামিটারটি বাদ দিন এবং ফেরতের মানটি ক্যাপচার করুন:

var elementTitle = $('#yourElementId').prop('title');

পরীক্ষা করে দেখুন prop()এপিআই ডকুমেন্টেশন jQuery জন্য।

আপনি যদি সত্যিই বৈশিষ্ট্যগুলি ব্যবহার করতে না চান, বা আপনি v1.6 এর আগে jQuery এর একটি সংস্করণ ব্যবহার করছেন, তবে আপনার এখানে পড়তে হবে:

JQuery এর সাথে একটি উপাদানের title বৈশিষ্ট্য পান বা সেট করুন (সংস্করণ <1.6)

আপনি নিম্নলিখিত কোড সহ title বৈশিষ্ট্যটি পরিবর্তন করতে পারেন :

$('#yourElementId').attr('title', 'your new title');

অথবা এটি দিয়ে পুনরুদ্ধার করুন:

var elementTitle = $('#yourElementId').attr('title');

পরীক্ষা করে দেখুন attr()এপিআই ডকুমেন্টেশন jQuery জন্য।


5
যদি এটি একটি ভাল নির্মিত উত্তর না হয় তবে কোনওটিই নয়। এবং এটি যথাযথ যেমন এটি নির্মিত হয়েছে ঠিক। +1 ... (ওহ, এবং আপনার নামটিও দুর্দান্ত, কারণ এটি আমার) এমনকি
এটিও

@ ভয়েডকিং: আমি জনপ্রিয় হয়ে ওঠা বর্তমান উত্তরগুলি পুনরায় ঘুরে দেখার এবং তৈরি করার ঝোঁক রাখি (যার মধ্যে আমার কেবল কয়েকটি আছে)। আমি এমন কিছু সরবরাহ করার চেষ্টা করি যা আমি আশা করি যে আমি গবেষণা করে বা কোনও পোস্ট দিচ্ছিলাম কিনা তা খুঁজে পেতে চাই। আমি খুশি যে আপনি এটি পেয়েছি!
সি

@ কোরি ওয়েল, সত্যি বলতে আমি অন্য কিছু খুঁজছিলাম (এটি একটি দীর্ঘ শট ছিল, কিন্তু ডিফল্ট এইচটিএমএল শিরোনাম বাক্সটি স্টাইল করার কোনও উপায় আছে কিনা তা সন্ধান করছিলাম)। আমি যা খুঁজছিলাম তা আমি খুঁজে পেলাম না তবে আপনি এই উত্তরের প্রয়াসটির সত্যই প্রশংসা করেছেন (আপনি সংস্থানগুলি, খাঁটি .js এবং jQuery ইত্যাদি দেখিয়েছেন)। যাইহোক, সুন্দর উত্তর!
ভয়েডকিং

@ ভয়েডকিং: এটি সম্ভবত উত্তর দেওয়ার জন্য ভুল জায়গা, তবে আপনি যখন ডিএল বা শিরোনামের বৈশিষ্ট্যগুলি নিয়ে আইটেমগুলি ঘুরে দেখেন তখন উপস্থিত ডিফল্ট সরঞ্জামগুলির কথা বলছেন তবে সম্ভবত এই উত্তর আপনাকে কিছুটা অন্তর্দৃষ্টি দেবে।
সি

@ কোরি আপনাকে ধন্যবাদ, স্যার!
ভয়েডকিং

31

Jquery ui মডেল সংলাপগুলিতে আপনাকে এই নির্মাণটি ব্যবহার করতে হবে:

$( "#my_dialog" ).dialog( "option", "title", "my new title" );

3
Lifesaver হয় !! উপরের ভোট দেওয়া উত্তরটি ব্যবহার করার সময়, শিরোনামটি একবারে পরিবর্তিত হয়, তারপরে শিরোনামটি পরিবর্তিত হয় না আপনি যখনই ডায়ালগের মধ্যে শিরোনাম বিকল্পটি ব্যবহার করেন তখন !! অনেক ধন্যবাদ!
রায়ান এলিস

আমি মন্তব্যগুলি পড়তে পেরে আনন্দিত ;-) যদি আপনাকে বেশ কয়েকবার শিরোনাম পরিবর্তন করতে হয় তবে আপনাকে এটি ডায়ালগ বিকল্পগুলিতে সেট করতে হবে।
মিশেল

কখনও কখনও ভাবেন নি যে এটি বহুবার গৃহীত হবে। আমি এটি খুব খুশি যে এটি সাহায্য করেছে :-)
ইগোর এল

15

আমি নিরস্ত

$("#myElement").attr("title", "new title value")

অথবা

$("#myElement").prop("title", "new title value")

কৌশলটি করা উচিত ...

আমি মনে করি আপনি jQuery ডক্সে সমস্ত মূল ফাংশন খুঁজে পেতে পারেন , যদিও আমি ফর্ম্যাটিংটি ঘৃণা করি।


7

আরেকটি বিকল্প, আপনি যদি পছন্দ করেন তবে তা হবে jQuery অবজেক্ট থেকে DOM উপাদানটি পাওয়া এবং এতে স্ট্যান্ডার্ড ডিওএম এক্সেসারস ব্যবহার করা:

$("#myElement")[0].title = "new title value";

"JQuery উপায়", হিসাবে অন্যদের দ্বারা উল্লিখিত, অ্যাটর () পদ্ধতিটি ব্যবহার করা। এটার () এর জন্য এপিআই ডকুমেন্টেশনটি এখানে দেখুন


2
jqueryTitle({
    title: 'New Title'
});

প্রথম শিরোনামের জন্য:

jqueryTitle('destroy');

https://github.com/ertaserdi/jQuery-Title


এই সমস্যাটি jquery লাইব্রেরি নিজেই ব্যবহার করে সমাধান করা যেতে পারে। ওপি এর উল্লেখ করার সময় আপনার কেবল তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করার কথা বলা উচিত, বা তৃতীয় পক্ষের লাইব্রেরি ব্যবহার না করে এটি সম্পন্ন করা যায় না।
অবভিশেক

হ্যাঁ, তবে অন্যান্য বৈশিষ্ট্যগুলিও রয়েছে। সহজ তবে দুর্দান্ত সমাধান ... আপনি পরীক্ষা করতে পারেন ...
এরদী এরতাş

তৃতীয় পক্ষের লাইব্রেরির একটি HT পরিবহন ওভারহেড থাকবে, যা স্টক / নেটিভ পদ্ধতি ব্যবহার করে এড়ানো যায়।
অবভিশেক

এছাড়াও, ইতিমধ্যে একটি বিস্তৃতভাবে গৃহীত উত্তর রয়েছে যা আরও কার্যকর।
অবভিশেক

2

যদি আপনি একটি তৈরি করে এটিতে divএকটি যুক্ত titleকরার চেষ্টা করছেন ।

চেষ্টা

var myDiv= document.createElement("div");
myDiv.setAttribute('title','mytitle');

0

@ সিᴏʀʏ উত্তরের যোগ হিসাবে, নিশ্চিত করুন যে সরঞ্জামটিপটির শিরোনামটি ইতিমধ্যে HTML উপাদানটিতে ম্যানুয়ালি সেট করা হয়নি। আমার ক্ষেত্রে, টুলটিপের স্প্যান শ্রেণিতে ইতিমধ্যে একটি স্থির শিরোনাম পাঠ্য রয়েছে, কারণ এটি আমার জিক্যুরি ফাংশন$('[data-toggle="tooltip"]').prop('title', 'your new title'); কাজ করে না।

যখন আমি এইচটিএমএল স্প্যান ক্লাসে শিরোনামের বৈশিষ্ট্যটি সরিয়েছি, jQuery কাজ করছিল।

তাই:

<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
      <span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top" title="this is my pre-set title text"></span>
</span>

বেকড করা উচিত:

<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
      <span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top"></span>
</span>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.