jQuery .data () কাজ করে না, তবে .attr () করে

107

এ সম্পর্কে আরও নির্দিষ্ট না হওয়ার জন্য আমাকে ক্ষমা করুন। আমার এমন এক অদ্ভুত বাগ আছে। ডক লোড হওয়ার পরে, আমি মূলত কিছু উপাদান লুপ করেছি data-itemname=""এবং ব্যবহার করে আমি সেই মানগুলি সেট করে .attr("data-itemname", "someValue")।

ইস্যু: যখন আমি ঐ উপাদানের পুরনো পরে লুপ, আমি যদি না elem.data().itemname, আমি পেতে "", কিন্তু যদি আমি কি elem.attr("data-itemname"), আমি পেতে "someValue"। এটি jQuery এর প্রাপ্ত ব্যক্তি .data()কেবলমাত্র এমন উপাদান পান যা প্রাথমিকভাবে কিছু মান রাখার জন্য সেট করা থাকে তবে সেগুলি যদি মূলত খালি হয় এবং পরে সেট .data()হয় তবে পরে মানটি পায় না।

আমি এই বাগটি পুনরায় তৈরি করার চেষ্টা করছি কিন্তু সক্ষম হয়ে উঠতে পারি নি।

সম্পাদন করা

আমি বাগটি আবার তৈরি করেছি! http://jsbin.com/ihuhep/edit#javascript,html,live

এছাড়াও উপরের লিঙ্ক থেকে স্নিপেটগুলি ...

জাতীয়:

var theaters = [
    { name: "theater A", theaterId: 5 },
    { name: "theater B", theaterId: 17 }
];

$("#theaters").html(
    $("#theaterTmpl").render(theaters)
);

// DOES NOT WORK - .data("name", "val") does NOT set the val
var theaterA = $("[data-theaterid='5']");
theaterA.find(".someLink").data("tofilllater", "theater5link"); // this does NOT set data-tofilllater
$(".someLink[data-tofilllater='theater5link']").html("changed link text"); // never gets changed

// WORKS - .attr("data-name", "val") DOES set val
var theaterB = $("[data-theaterid='17']");
theaterB.find(".someLink").attr("data-tofilllater", "theater17link"); // this does set data-tofilllater
$(".someLink[data-tofilllater='theater17link']").html("changed link text");

এইচটিএমএল:

<body>
    <div id="theaters"></div>
</body>

<script id="theaterTmpl" type="text/x-jquery-tmpl">
    <div class="theater" data-theaterid="{{=theaterId}}">
        <h2>{{=name}}</h2>
        <a href="#" class="someLink" data-tofilllater="">need to change this text</a>
    </div>
</script>

jquery

— আয়ান ডেভিস
সূত্র

4

বাগটি পুনরায় তৈরি করার জন্য আরও চেষ্টা করুন :-)

— ডেকেমিনস

1

তাই elem.data("itemname")না elem.data().itemname?

— হোগান

যখন elem.data ()। আইটেমের নাম আপনাকে মানটি পড়তে দেবে তা আপনাকে মান সেট করতে দেবে না। (এভাবে elem.data().itemname = somevalue;অন্তর্নিহিত ডেটা পরিবর্তন হয় না))

— হোগান

@ ডকুমিনস - আমি বাগটি পুনরায় তৈরি করেছি, দয়া করে সম্পাদিত সংস্করণ দেখুন।

— ইয়ান ডেভিস

210

এইচটিএমএল 5 ডেটা অ্যাট্রিবিউটের সাথে .data()এবং এর .attr('data-name')জন্য কাজ করার সময় আমি কিছুদিন আগে একটি অনুরূপ "বাগ" এ দৌড়েছি ।

আপনি যে আচরণটি বর্ণনা করছেন এটি কোনও বাগ নয়, তবে এটি ডিজাইনের মাধ্যমে।

.data()কল বিশেষ - না শুধুমাত্র এটা HTML5 এর ডেটা পুনরুদ্ধার করে এটা বৈশিষ্ট্যাবলী নির্ণয় / বৈশিষ্ট্যাবলী বিশ্লেষণ করতে প্রচেষ্টা করা হয়েছে। সুতরাং মতো একটি বৈশিষ্ট্য data-myjson='{"hello":"world"}'যখন মাধ্যমে উদ্ধার করা .data()একটি ফিরে আসবে Objectমাধ্যমে যখন আহরণ .attr()একটি স্ট্রিং ফিরে আসবে। Jsfiddle উদাহরণ দেখুন।

যেহেতু .data()অতিরিক্ত প্রক্রিয়াকরণ jQuery বিশিষ্ট মূল্যায়নের ফলাফলগুলিতে সংরক্ষণ করে $.cache- সর্বোপরি, একবার কোনও ডেটা অ্যাট্রিবিউট মূল্যায়ন করা গেলে প্রতিটি .data()কলটিতে পুনরায় মূল্যায়ন করা অপ্রয়োজনীয় - বিশেষত যেহেতু ডেটা ভেরিয়েবলগুলিতে জটিল জেএসএন স্ট্রিং থাকতে পারে।

নিম্নলিখিতটি বলার জন্য আমি যা বলেছি: যে কোনও পরিবর্তন দ্বারা কোনও গুণাবলী পুনরুদ্ধারের পরে পরবর্তী কলগুলি দেখা যাবে না । .data().attr('data-myvar', '').data() Jsfiddle এ এটি পরীক্ষা করে দেখুন।

এই সমস্যাটি এড়াতে আন্তঃসংযোগ .dataএবং .attr()কল করবেন না । এক বা অন্য ব্যবহার করুন।

— leepowers
সূত্র

উত্তর হিসাবে এটি চিহ্নিত করা। অনুগ্রহ করে .ডাটা () বনাম .attr () সহ সমস্ত সম্ভাব্য দৃশ্যের জন্য এই পরীক্ষাটি দেখুন, যার মধ্যে প্রতিটি ব্যবহার করা এবং সেট করা এবং নির্বাচকরা সেট হওয়ার পরে তার দৈর্ঘ্য আউটপুট করা অন্তর্ভুক্ত করে, jsbin.com/acegef/edit# জাভাস্ক্রিপ্ট, এইচটিএমএল, লাইভ

— ইয়ান ডেভিস

9

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

— হ্যারল্ডো_ওক

1

@ ঘুমের কর্মীরা, ".ডাটা () এর মাধ্যমে কোনও বৈশিষ্ট্য পুনরুদ্ধার করার পরে .attr ('ডেটা-মাইভার', '') এর দ্বারা করা কোনও পরিবর্তন পরবর্তীকালে .ডাটা () কলগুলি দ্বারা দেখা যাবে না", যদি তা প্রকৃতপক্ষে ক্যাশে হ'ল (তবে) c। ক্যাশে), তাহলে এটি কোনও ভাল লাগবে না! ক্যাশে অন্ধভাবে নির্ভর করার পরিবর্তে পরবর্তীকালে ডেটা () কলগুলি কিছু প্রাথমিক চেক করতে পারে (যেমন মূল্য এখন খালি বা স্ট্রিংয়ের দৈর্ঘ্যের পরিবর্তিত হয়েছে (বর্তমান মানের সাথে ক্যাশের সাথে মিলছে)

— মিনহাজুল

1

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

— andreszs

3

সুতরাং, এটি ডেটা () ক্যাশে যা আমাকে কয়েক ঘন্টা ধরে ধরে রেখেছে। এতে অবাক হওয়ার কিছু নেই কেন আমি এর মানটি যতই পরিবর্তন করি না কেন, এটি এখনও একই মান ফেরত দেয়। এর জন্য ধন্যবাদ.

— লিনেল ইমানুয়েল নেরি

17

এটি একটি ভুল বোঝাবুঝির ফলাফল: গুণাবলীর dataজন্য কোনও অ্যাক্সেসর নয়data-* । এটি এর চেয়ে কম এবং কম উভয়ই।

dataউপাদানটিতে jQuery এর ডেটা ক্যাশের জন্য একটি অ্যাক্সেসর। যে ক্যাশে সক্রিয়া থেকে data-*বৈশিষ্ট্যাবলী যদি কোনো উপস্থিত হয়, কিন্তু dataকখনো লিখেছেন প্রেরক, কিংবা আরম্ভের পরে বৈশিষ্ট্য পরিবর্তন ডেটা ক্যাসে পরিবর্তন করে:

const div = $("[data-example]");
console.log('div.data("example"):', div.data("example"));
console.log('div.attr("data-example"):', div.attr("data-example"));
console.log('Using div.data("example", "updated")');
div.data("example", "updated");
console.log('div.data("example"):', div.data("example"));
console.log('div.attr("data-example"):', div.attr("data-example"));

<div data-example="initial value"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

স্নিপেট প্রসারিত করুন

dataএটি বিভিন্ন উপায়ে যা সন্ধান করে তা ম্যাসেজ করে, ডেটা ধরণের অনুমান করে, একটি সংখ্যা data("answer")দিয়ে data-answer="42"একটি উপাদান তৈরি করে , স্ট্রিং নয়, এমনকি JSON হিসাবে জিনিসগুলি পার্সিং করে যদি তারা JSON এর মতো দেখায়:

console.log(typeof $("[data-answer]").data("answer"));
console.log(typeof $("[data-json]").data("json"));
console.log(typeof $("[data-str]").data("str"));

<div data-answer="42"></div>
<div data-json='{"answer":42}'></div>
<div data-str="example"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

স্নিপেট প্রসারিত করুন

আপনি বৈশিষ্ট্যাবলী ব্যবহার করতে চান তাহলে (উভয় পড়া এবং তাদের সেটিং), ব্যবহার attr, না data। attr হয় বৈশিষ্ট্যাবলী জন্য একটি অ্যাকসেসর।

— টিজে ক্রাউডার
সূত্র

6

কারণ কারণ বৈশিষ্ট্যের নাম data-itemname। আপনি -শর্টহ্যান্ড obj.attributeস্বরলিপিটিতে ব্যবহার করতে পারবেন না (obj.data- আইটেম নামটি "Obj.data বিয়োগ আইটেমনেম" হিসাবে ব্যাখ্যা করা হবে)।

— মার্ক বি
সূত্র

বল কে? তুমি কি একটি লিংক সরবরাহ করতে পার?

— জহরিচি

6

.attr("data-itemname", "someValue") ডিওএম সংশোধন করে।

.data("itemname", "someValue") jQuery ক্যাশে পরিবর্তন করে।

এটি জাভাস্ক্রিপ্ট অনুসরণ করে এবং সিএসএসে অতিরিক্ত কাজ করার জন্য আপনাকে উভয়ই সেট করতে হবে।

theaterA.find(".someLink").attr("data-itemname", "someValue");
theaterA.find(".someLink").data("itemname", "someValue");

— এলমার হাফিংহফ
সূত্র

4

আপনি শুধু ব্যবহার করবেন না কেন .data() কোথাও ?

আপনি এইচটিএমএলটিতে ডিফল্ট মানগুলিকে ইনলাইনও ঘোষণা করতে পারেন, যা খুব ভাল।

<span data-code="pony">text</span>

এবং

$("span").data("code") == "pony" // true

আপনি যদি এটি পরিবর্তন করতে চান তবে আপনি কেবল এটি করুন

$("span").data("code", "not-a-pony");

এবং একেবারে মুছে ফেলার জন্য আপনি প্রার্থনা করতে পারেন

$("span").removeData("code");

আপনার সত্যই চেষ্টা করা উচিত এবং ব্যবহারটি এড়ানো উচিত .attr("data-*"), কেন আপনি যেভাবেই করতে চান তা আমি জানি না।

— bevacqua
সূত্র

s / should / must, ব্যবহার .attr('data-*', ...)করে ডেটা দৃশ্যমান হবে না.data()

— থিফমাস্টার

তবে আপনি jQuery ছাড়াই এটি করতে হবেন এমনভাবে অ্যাটর () দিয়ে এটি করছেন না ? (getAttribute tho সহ)

— পাওয়ারবাই

আপনি যদি jQuery ব্যবহার না করেন getAttribute()এবং setAttribute()- সুতরাং উভয় পদ্ধতিই আসল বৈশিষ্ট্যগুলিতে অ্যাক্সেস করবে এবং এটি আবার কাজ করবে। অথবা আপনি কেবল dataSetআধুনিক ব্রাউজারগুলির সরবরাহ করা সম্পত্তিটি ব্যবহার করবেন ।

— চোরমাস্টার

1

এর মতো উপাদান নির্বাচন করবেন না। এটি মারাত্মকভাবে অক্ষম কারণ এটি নথির প্রতিটি একক উপাদানকে পুনরাবৃত্তি করতে হবে । classপরিবর্তে একটি ব্যবহার করুন যেহেতু নির্দিষ্ট শ্রেণীর সাথে উপাদান পেতে ব্রাউজারগুলির দেশীয় ফাংশন থাকে।

— চোরমাস্টার

1

তবে, "555" ডেটা, তাই আমার উচিত ডেটা () যুক্তি ব্যবহার করা উচিত। শ্রেণীর নামটিতে ডেটা স্থাপন করা উপস্থাপনাটির সাথে ডেটা মেশানো। এটি করার বিভিন্ন উপায় আমি মনে করি।

— ইয়ান ডেভিস

1

আপনার অবশ্যই ডেটা সেট করে রাখতে হবে .data('itemname', 'someValue');। .attr()ডেটা অ্যাট্রিবিউট সেট করতে ব্যবহার করা কাজ করবে না: http://jsfiddle.net/ThiefMaster/YHsKx/

তবে আপনি মার্কআপ হিসাবে উদাহরণ ব্যবহার করে ইনলাইন মান সরবরাহ করতে পারেন<div data-key="value"> ।

— ThiefMaster
সূত্র

জেসফিডেলে, দুটি সেট করার পরে কাজটি কাজ করে। সুতরাং, অ্যাটর করা ("ডেটা-আইটেমনেম", "মান") কাজ করে। আমি ক্রোম ব্যবহার করছি।

— ইয়ান ডেভিস

@ ইয়ান আহ, না .data()কল অ্যাট্রিবিউট সেট করে, যখন .attr()কল কিছুই করে না।

— বেভাকুয়া

@ ইয়ানডাভিস: "সেট অ্যাটর" ক্লিক করুন এবং "পান" আপনাকে একটি খালি অবজেক্ট দেবে। শুধুমাত্র "সেট ডেটা" কাজ করে।

— চোরমাস্টার

@ নিকো - এটি আমি যা করেছি ঠিক তা: (1) "সেট অ্যাটর" বোতামটি ক্লিক করুন, তারপরে (2) "পান" বোতামটি ক্লিক করুন। এটিই ঘটেছিল: এটি আমাকে সতর্ক করেছিল, "test" পরীক্ষা ":" মিয়াও "।"। সুতরাং, .attr () বৈশিষ্ট্যটি সেট করে। অন্যথায়, সতর্কতাটি ফাঁকা থাকত। আপনি যদি এই সঠিক পদক্ষেপগুলি অনুসরণ করেন তবে আপনি কি আলাদা ফলাফল পাবেন? ধন্যবাদ।

— ইয়ান ডেভিস

1

@ থিফমাস্টার - আমার সরবরাহিত কোডটিতে থিয়েটারএতে, আমি মোটেও ব্যবহার করছি না , এবং .attr()কেবল .data()নির্বাচকটির দৈর্ঘ্য $(".someLink[data-tofilllater='theater5link']")শূন্য। সুতরাং এটি আমার মত ব্যবহার করতে হবে .attr(): /

— ইয়ান ডেভিস

0

আমি দেখতে পাচ্ছি যে এটি কীভাবে ডেটা অ্যাট্রিবিউট সেটিংয়ে যেতে পারে সে সম্পর্কে কিছু বিভাজন নিয়ে এসেছিল।

আমিও এই সমস্যায় পড়েছি এবং আমি দেখতে পেয়েছি যে সমস্যাটি কেবল ডেটা অ্যাট্রিবিউটের নাম ফর্ম্যাটিং বলে মনে হচ্ছে ।

আমার অভিজ্ঞতা হিসাবে, আপনার ডেটা ভেরিয়েবলের হাইফেন ব্যবহার করা উচিত (" ডেটা- " এর পরে আসা ভেরিয়েবলের নাম )।

এটি আমার পক্ষে কার্যকর হয়নি:

[মার্কআপ]

<div class="list" id="myElement1" data-item-order="some-value"> .... </div>

[JQuery এর]

jQuery("#myElement1").data("item-order", "my-new-value");

কিন্তু নিম্নলিখিতটি ঠিক কাজ করেছে! :):

(আমি যখন প্রয়োজন তখন হাইফেনের পরিবর্তে আন্ডারস্কোর ব্যবহার করি)

[মার্কআপ]

<div class="list" id="myElement1" data-item_order="some-value"> .... </div>

[JQuery এর]

jQuery("#myElement1").data("item_order", "my-new-value");

আমি আসা করি এটা সাহায্য করবে. সবাইকে চিয়ার্স করুন!

— mmmdearte
সূত্র