ডেটা-অ্যাট্রিবিউট মানটি আপডেট করতে পারে না

Question 1

যদিও ওয়েবে এটি সম্পর্কে কয়েকটি উদাহরণ রয়েছে তবে এটি সঠিকভাবে কাজ করছে বলে মনে হয় না। আমি সমস্যাটি বুঝতে পারি না।

আমি এই সহজ এইচটিএমএল আছে

         <div id="foo" data-num="0"></ div>
         <a href="#" id="changeData">change data value</a>

প্রতিবার আমি "ডাটা মান পরিবর্তন করুন" লিঙ্কটি ক্লিক করি আমি ডেটা-নাম্বারের ডেটা মান আপডেট করতে চাই। উদাহরণস্বরূপ, আমার এটি দরকার 1,2,3,4, ... (প্লাস 1 প্রতিবার আমি লিঙ্কটি ক্লিক করি)

আমার যা আছে তা

            var num = $('#foo').data("num");
            console.log(num);
            num = num+1;               
            console.log(num);
            $('#foo').attr('data-num', num);

মানটি প্রতিবার 0 থেকে 1 এর মধ্যে পরিবর্তিত হয়। আমি এটিকে বর্ধিত করতে পারি না। কোন পরামর্শ আমি কি ভুল করছি?

Question 2

উত্তর নীচে ভাল এক

আপনি ডেটা পদ্ধতিটি সঠিকভাবে ব্যবহার করছেন না । ডেটা আপডেট করার জন্য সঠিক কোডটি হ'ল:

$('#foo').data('num', num);

সুতরাং আপনার উদাহরণটি হ'ল:

var num = $('#foo').data("num") + 1;       
console.log(num)       
$('#foo').data('num', num); 
console.log(num)

Question 3

পরিবর্তে এটি ব্যবহার করুন, আপনি যদি নোড এলিমেন্টের নয়, ডেটা অবজেক্টের বৈশিষ্ট্যযুক্ত ডেটা-সংখ্যা পরিবর্তন করতে চান :

ডেমো

$('#changeData').click(function (e) { 
    e.preventDefault();
    var num = +$('#foo').attr("data-num");
    console.log(num);
    num = num + 1;
    console.log(num);
    $('#foo').attr('data-num', num);
});

PS: তবে আপনার কার্যত সমস্ত ক্ষেত্রে ডেটা () অবজেক্টটি ব্যবহার করা উচিত, তবে সমস্ত নয় ...

Question 4

যদি আমরা বিদ্যমান, নেটিভ জাভাস্ক্রিপ্ট ব্যবহার করে এই বৈশিষ্ট্যগুলি পুনরুদ্ধার বা আপডেট করতে চাই , তবে আমরা নীচের বর্ণিত পদ্ধতিগুলি getAttributeএবং setAttributeপদ্ধতিগুলি ব্যবহার করে এটি করতে পারি :

জাভাস্ক্রিপ্ট

<script>
// 'Getting' data-attributes using getAttribute
var plant = document.getElementById('strawberry-plant');
var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'

// 'Setting' data-attributes using setAttribute
plant.setAttribute('data-fruit','7'); // Pesky birds
</script>

JQuery মাধ্যমে

// Fetching data
var fruitCount = $(this).data('fruit');

// Above does not work in firefox. So use below to get attribute value.
var fruitCount = $(this).attr('data-fruit');

// Assigning data
$(this).data('fruit','7');

// But when you get the value again, it will return old value. 
// You have to set it as below to update value. Then you will get updated value.
$(this).attr('data-fruit','7');

ভ্যানিলা js এর জন্য এই ডকুমেন্টেশন বা jquery এর জন্য এই ডকুমেন্টেশন পড়ুন

Question 5

আমার জন্য, জ্যাকুরি লাইব 2.1.1 ব্যবহার করে নিম্নলিখিতটি আমার প্রত্যাশার মতো কার্যকর হয়নি:

উপাদান ডেটা বৈশিষ্ট্য মান সেট করুন:

$('.my-class').data('num', 'myValue');
console.log($('#myElem').data('num'));// as expected = 'myValue'

তবে উপাদানটি অ্যাট্রিবিউট ব্যতীতই থেকে যায়:

<div class="my-class"></div>

আমার ডিওএম আপডেট হওয়া দরকার যাতে আমি পরে $ ('। আমার-শ্রেণীর [ডেটা-নাম্বার "" আমারভ্যালু "]') করতে পারি // বর্তমান দৈর্ঘ্য 0

তাই আমাকে করতে হয়েছিল

$('.my-class').attr('data-num', 'myValue');

DOM আপডেট করার জন্য:

<div class="my-class" data-num="myValue"></div>

বৈশিষ্ট্যটি বিদ্যমান কিনা বা না $ .attr ওভাররাইট হবে।

Question 6

একই সমস্যা ছিল এবং শেষ পর্যন্ত আমাকে উভয় সেট করতে হয়েছিল

obj.attr('data-myvar','myval')

এবং

obj.data('myvar','myval')

এবং এই পরে

obj.data('myvar') == obj.attr('data-myvar')

আশাকরি এটা সাহায্য করবে.

Question 7

মূলত, ডেটা অ্যাট্রিবিউট মান সেট / আপডেট করার দুটি উপায় রয়েছে যা আপনার প্রয়োজনের উপর নির্ভর করে। পার্থক্যটি কেবলমাত্র যেখানে ডেটা সংরক্ষণ করা হয়েছে,

আপনি যদি .data()এটি ব্যবহার করেন তবে এটি স্থানীয় ভেরিয়েবল নামে ডাকা হবে data_userএবং এটি উপাদান তদন্তে দৃশ্যমান নয়, আপনি যদি .attr()এটি ব্যবহার করেন তবে এটি সর্বজনীনভাবে দৃশ্যমান হবে।

এই মন্তব্য সম্পর্কে আরও স্পষ্ট ব্যাখ্যা

Question 8

এই উত্তরটি তাদের জন্য যারা কেবলমাত্র একটি ডেটা-অ্যাট্রিবিটির মান পরিবর্তন করতে চান

প্রস্তাবিত আপনার Jquery ডেটা-অ্যাটর এর মান ঠিকমতো বদলাবে না যেমন @ অ্যাডিনিও বলেছেন। যদিও কিছু কারণে, আমি তাকে (বা অন্য কোনও) তাদের ডেটা-অ্যাটর আপডেট করার জন্য সঠিক পদ্ধতি পোস্ট করে দেখছি না। @ লুকাস উইলেমস পোস্ট করেছেন যে উত্তরটি ব্রায়ান টম্পসেট - 汤 having এর সমস্যার উত্তর হতে পারে, তবে এটি অন্য ব্যবহারকারীদের এখানে আনতে পারে এমন তদন্তের উত্তর নয়।

মূল তদন্তের বিবৃতিতে দ্রুত উত্তর

- ডেটা-অ্যাটর আপডেট করতে

$('#ElementId').attr('data-attributeTitle',newAttributeValue);

সহজ ভুল * - আপনার বৈশিষ্ট্যের শুরুতে অবশ্যই "ডেটা-" থাকা উচিত যা আপনি এর মান পরিবর্তন করতে চাইছেন।

Question 9

একটি অনুরূপ সমস্যা ছিল, আমি প্রস্তাব করি এই সমাধানটি আইথ 10 এবং এর চেয়ে কম বয়সীগুলিতে সমর্থিত নয়।

দেওয়া হয়েছে

<div id='example' data-example-update='1'></div>

জাভাস্ক্রিপ্ট স্ট্যান্ডার্ড ডেটা-উদাহরণ-আপডেট আপডেট করতে ডেটাসেট নামে একটি সম্পত্তি সংজ্ঞায়িত করে।

document.getElementById('example').dataset.exampleUpdate = 2;

দ্রষ্টব্য: সঠিক ডেটা অ্যাট্রিবিউট অ্যাক্সেস করতে উটের মামলার স্বরলিপি ব্যবহার করুন।

সূত্র: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Question 10

আমি যখন jquery ব্যবহার করছিলাম তখন এইচটিএমএল ডেটা ট্যাগ আপডেট করার ক্ষেত্রে একই সমস্যা ছিল তবে কোডটি পরিবর্তন করে যা জ্যাকুয়ারি থেকে জাভাস্ক্রিপ্টে আসল কাজ করে।

বোতামটি ক্লিক করা হলে এটি ব্যবহার করার চেষ্টা করুন: (নোট করুন যে মূল কোডটি জাভাস্ক্রিপ্টস সেটআট্রিবিউট () ফাংশন)

function increment(q) {

    //increment current num by adding with 1
    q = q+1;

    //change data attribute using JS setAttribute function
    div.setAttribute('data-num',q);

    //refresh data-num value (get data-num value again using JS getAttribute function)
    num = parseInt(div.getAttribute('data-num'));

    //show values
    console.log("(After Increment) Current Num: "+num);

}

//get variables, set as global vars
var div = document.getElementById('foo');
var num = parseInt(div.getAttribute('data-num'));

//increment values using click
$("#changeData").on('click',function(){

    //pass current data-num as parameter
    increment(num);

});