এইচটিএমএল উপাদানগুলিতে ডেটা অ্যাট্রিবিউট কীভাবে সেট করবেন

Question

আমার একটি ডিবি আছে একটি গুনযুক্ত সঙ্গে data-myval = "10"। আমি এর মান আপডেট করতে চাই; আমি ব্যবহার করলে কি তা বদলাবে না div.data('myval',20)? আমার div.attr('data-myval','20')কি কেবল ব্যবহারের দরকার ?

আমি কি এইচটিএমএল 5 এবং jQuery এর মধ্যে বিভ্রান্ত হয়ে যাচ্ছি? দয়া করে উপদেশ দাও. ধন্যবাদ!

সম্পাদনা: আপডেট div.data('myval')=20হয়েছে div.data('myval',20)তবে এখনও এইচটিএমএল আপডেট হচ্ছে না।

Comments

কি আছে div? একটি jQuery অবজেক্ট বা উপাদান?

— ব্র্যাড

div.data('myval')=20সিনট্যাক্সটি ভুল বলে কোনও মান সঞ্চয় করতে কাজ করবে না - সঠিক বাক্য গঠনের উত্তরগুলি দেখুন। তবে নোট করুন যে .data()উপাদানটির বৈশিষ্ট্যটি আপডেট করে না , এটি অন্য কোথাও ডেটা সঞ্চয় করে।

— nnnnnn

যাদের জিকিউয়ারি এড়ানোর বুদ্ধি রয়েছে তাদের জন্য এটি ব্যবহার করুন -> div.dataset.myval = '20';

— হরিজ ক্রিটেনিস

Answer 1

এইচটিএমএল

<div id="mydiv" data-myval="10"></div>

জাতীয়

var a = $('#mydiv').data('myval'); //getter

$('#mydiv').data('myval',20); //setter

ডেমো

উল্লেখ

তথ্যসূত্র থেকে:

jQuery নিজেই .data()'ইভেন্ট' এবং 'হ্যান্ডেল' নামের অধীনে তথ্য সংরক্ষণের জন্য পদ্ধতিটি ব্যবহার করে এবং অভ্যন্তরীণ ব্যবহারের জন্য আন্ডারস্কোর ('_') দিয়ে শুরু হওয়া কোনও ডেটা নাম সংরক্ষণ করে।

এটি লক্ষ করা উচিত যে jQuery এর এইচটিএমএলে বৈশিষ্ট্যটি data()পরিবর্তন করে না data।

সুতরাং, যদি আপনাকে dataএইচটিএমএলটিতে বৈশিষ্ট্যটি পরিবর্তন করতে হয় তবে তার .attr()পরিবর্তে আপনার উচিত ।

এইচটিএমএল

<div id="outer">
    <div id="mydiv" data-myval="10"></div>
</div>

জাতীয়:

alert($('#outer').html());   // alerts <div id="mydiv" data-myval="10"> </div>
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').attr("data-myval","20"); //setter
alert($('#outer').html());   //alerts <div id="mydiv" data-myval="20"> </div>

এই ডেমো দেখুন

Comments

আপনার কী ধারাবাহিকতা দরকার তা আমি জানি না তবে আমি এবং এইচটিএমএল -5 ডেটা বৈশিষ্ট্যগুলি ব্যবহার data()করার পরামর্শ দেব । getset

— যশবন্ত

পরিবর্তে @ যশবন্ত একটি দরকারী সম্পাদনা হতে পারে: সিএসএস নিয়মের মতো মনে করুন [data-myval="10"]{ color: red; }, এটি ডেটা অ্যাট্রিবিউটের মান অনুযায়ী ট্যাগকে স্টাইল করবে।

— টেকনাইকুইস্ট

.ডাটা কাজ করে না। .attr কাজ করে। এটি হতে পারে আমরা উত্তরটি এটি পরিষ্কার করার জন্য সম্পাদনা করতে পারি। মনে হয় প্রথমটি সমাধান হ'ল, যদিও এটি কিছুটা ভাল উন্মোচিত হতে পারে। আমি কীভাবে আরও ভাল ব্যাখ্যা করব তা সম্পর্কে নিশ্চিত নই, এই কারণেই আমি পোস্টটি সম্পাদনা করি না।

— গাউচো

@ গাওচো, এখন কি ভাল?

— যশোবন্ত

@ গাউচো .ডাটা কেবল তখনই কাজ করবে যদি আপনি পুরানো সংস্করণগুলির জন্য নতুন jQuery> = 1.4.3 ব্যবহার করেন .আউটআর কাজ করবে।

— ইলিয়াস

Answer 2

আপনি নিম্নলিখিত attrজিনিসটি ব্যবহার করতে পারেন ;

এইচটিএমএল

<div id="mydiv" data-myval="JohnCena"></div>

লিপি

 $('#mydiv').attr('data-myval', 'Undertaker'); // sets 
 $('#mydiv').attr('data-myval'); // gets

অথবা

$('#mydiv').data('myval'); // gets value
$('#mydiv').data('myval','John Cena'); // sets value

Comments

আমার জন্য শুধুমাত্র .attr নিয়ে কাজ করেছেন। এটা কি সম্ভব?

— Zarweya

আমি আনন্দিত এটি কাজ করে। .ডাটা () কলটি বিশেষ - এটি এইচটিএমএল 5 ডেটা বৈশিষ্ট্যগুলি পুনরুদ্ধার করে না এটি বৈশিষ্ট্যগুলি মূল্যায়ন / বিশ্লেষণ করার চেষ্টা করে। সুতরাং ডেটা-মাইভাল = 'hello "হ্যালো": "ওয়ার্ল্ড"}' এর মতো একটি অ্যাট্রিবিউট সহ যখন .ডাটা () দ্বারা পুনরুদ্ধার করা হয় তখন একটি বস্তু ফিরে আসবে যখন .attr () এর মাধ্যমে পুনরুদ্ধার একটি স্ট্রিং ফিরে আসবে।

— বাকের নকভি

Answer 3

দয়া করে মনে রাখবেন যে .data()আপনি data-জাভাস্ক্রিপ্টের সাথে এইচটিএমএল 5 বৈশিষ্ট্যগুলি পরিবর্তন করলে jQuery আপডেট হয় না ।

আপনি যদি এইচটিএমএল উপাদানগুলিতে বৈশিষ্ট্য .data()নির্ধারণ data-করতে jQuery ব্যবহার করেন তবে .data()সেগুলি পড়তে আপনি আরও ভাল jQuery ব্যবহার করেন। অন্যথায় যদি আপনি গতিসম্পন্ন বৈশিষ্ট্যগুলি আপডেট করেন তবে এখানে অসঙ্গতি থাকতে পারে। উদাহরণস্বরূপ, দেখুন setAttribute(), dataset(), attr()কম। মানটি পরিবর্তন করুন, বোতামটি কয়েকবার চাপুন এবং কনসোলটি দেখুন।

$("#button").on("click", function() {
  var field = document.querySelector("#textfield")

  switch ($("#method").val()) {
    case "setAttribute":
      field.setAttribute("data-customval", field.value)
      break;
    case "dataset":
      field.dataset.customval = field.value
      break;
    case "jQuerydata":
      $(field).data("customval", field.value)
      break;
    case "jQueryattr":
      $(field).attr("data-customval", field.value)
      break;
  }

  objValues = {}
  objValues['$(field).data("customval")'] = $(field).data("customval")
  objValues['$(field).attr("data-customval")'] = $(field).attr("data-customval")
  objValues['field.getAttribute("data-customval")'] = field.getAttribute("data-customval")
  objValues['field.dataset.customval'] = field.dataset.customval

  console.table([objValues])
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Example</h1>
<form>
  <input id="textfield" type="text" data-customval="initial">
  <br/>
  <input type="button" value="Set and show in console.table (F12)" id="button">
  <br/>
  <select id="method">
    <option value="setAttribute">setAttribute</option>
    <option value="dataset">dataset</option>
    <option value="jQuerydata">jQuery data</option>
    <option value="jQueryattr">jQuery attr</option>
  </select>
  <div id="results"></div>
</form>

Answer 4

ভ্যানিলা জাভাস্ক্রিপ্ট সমাধান

এইচটিএমএল

<div id="mydiv" data-myval="10"></div>

javascript:

• ডোমের getAttribute()সম্পত্তি ব্যবহার করা

   var brand = mydiv.getAttribute("data-myval")//returns "10"
   mydiv.setAttribute("data-myval", "20")      //changes "data-myval" to "20"
   mydiv.removeAttribute("data-myval")         //removes "data-myval" attribute entirely

• জাভাস্ক্রিপ্ট এর datasetসম্পত্তি ব্যবহার

  var myval = mydiv.dataset.myval     //returns "10"
  mydiv.dataset.myval = '20'          //changes "data-myval" to "20"
  mydiv.dataset.myval = null          //removes "data-myval" attribute

Answer 5

আপনি যদি jQuery ব্যবহার করেন তবে ব্যবহার করুন .data():

div.data('myval', 20);

আপনি এর সাথে স্বেচ্ছাসেবী ডেটা সঞ্চয় করতে পারবেন .data()তবে ব্যবহারের সময় আপনি কেবল স্ট্রিংয়ের মধ্যে সীমাবদ্ধ .attr()।

Comments

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

— nnnnnn

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

— nnnnnn

@ ব্লেন্ডার এটি আমার প্রশ্নের উত্তর দেয় না। আমি এইচটিএমএল আপডেট করতে চাই, তবে একই সাথে এটি পুনরুদ্ধার করতে এলিমেন্ট.ডেটা ('মাইভাল') ব্যবহার করুন।

— পুলকিত মিতল

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

— পুলকিত মিতল

@ পুলকিটমিত্তাল - নোট করুন যে .attr()আপনি সত্যই "এইচটিএমএল" আপডেট করছেন না, আপনি ডিওএম আপডেট করছেন। আপনি যখন ব্রাউজারটি আপনাকে "এইচটিএমএল" দিতে (যখন তা .html()ডিওএম দ্বারা হোক না কেন element.innerHTML) দিতে বলবেন তখনকার সময়ে ডিওমের অবস্থার উপর ভিত্তি করে ব্রাউজারটি কার্যকরভাবে এটি আপনার জন্য পুনঃজেনার করছে। প্রকার, রকম.

— nnnnnn

Answer 6

[jQuery] .ডাটা () বনাম .attr () বনাম। এক্সটেন্ড ()

.data()আমি সঠিক হলে jQuery পদ্ধতিটি jQuery দ্বারা পরিচালিত একটি অভ্যন্তরীণ অবজেক্ট আপডেট করে।

আপনি যদি data-attributesকিছু স্প্রেড দিয়ে নিজের আপডেট করতে চান তবে ব্যবহার করুন -

$('body').attr({ 'data-test': 'text' });

- অন্যথায়, $('body').attr('data-test', 'text');ঠিক কাজ করবে।

আপনি এটি সম্পাদন করতে পারেন এমন অন্য উপায়টি হ'ল -

$.extend( $('body')[0].dataset, { datum: true } );

- যা কোনও অতিরিক্ত নয়HTMLElement.prototype.dataset , কোনও বৈশিষ্ট্য পরিবর্তনকে সীমাবদ্ধ করে ।HTMLElement.prototype.attributes

Answer 7

ডেটা- অ্যাট্রিবিউট সেট করার আরেকটি উপায় হ'ল ডেটাसेट সম্পত্তি ব্যবহার করা ।

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

const el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

// set the data attribute
el.dataset.dateOfBirth = '1960-10-03'; 
// Result: el.dataset.dateOfBirth === 1960-10-03

delete el.dataset.dateOfBirth;
// Result: el.dataset.dateOfBirth === undefined

// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// Result: 'someDataAttr' in el.dataset === true

Answer 8

JQuery এবং DOM সিঙ্কে রাখতে, একটি সহজ বিকল্প হতে পারে

$('#mydiv').data('myval',20).attr('data-myval',20);