डेटा-विशेषता मान को अपडेट नहीं किया जा सकता

Question 1

हालांकि वेब पर इसके बारे में कुछ उदाहरण हैं, लेकिन यह सही ढंग से काम नहीं करता है। मैं इस समस्या का पता नहीं लगा सकता।

मेरे पास यह सरल HTML है

         <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);
});

पुनश्च: लेकिन आपको लगभग सभी मामलों में डेटा () ऑब्जेक्ट का उपयोग करना चाहिए, लेकिन सभी नहीं ...

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

खुद के लिए, Jquery lib 2.1 का उपयोग करते हुए निम्नलिखित ने मेरे द्वारा अपेक्षित तरीके से काम नहीं किया:

तत्व डेटा विशेषता मान सेट करें:

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

इस तत्व के बिना ही विशेषता बनी रहती है:

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

मुझे DOM अपडेटेड की आवश्यकता थी इसलिए मैं बाद में $ ('। My-class [data-num = "myValue"]') कर सकता था। // वर्तमान लंबाई ० है।

इसलिए मुझे करना पड़ा

$('.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 डेटा-Attr का मान सही ढंग से नहीं बदलेगा जैसा कि @adeneo ने बताया है। हालांकि किसी कारण से, मैं उसे (या किसी अन्य को) नहीं देख रहा हूं, जो अपने डेटा-एटीआर को अपडेट करने की मांग कर रहा है। @Lucas Willems ने जो जवाब पोस्ट किया है, वह ब्रायन टॉम्पसेट की समस्या का जवाब हो सकता है - 莱恩 uc हो रहा है, लेकिन यह उस पूछताछ का जवाब नहीं है जो अन्य उपयोगकर्ताओं को यहां ला रही हो सकती है।

मूल पूछताछ कथन के संबंध में त्वरित उत्तर

अद्यतन डेटा- attr के लिए

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

आसान गलतियाँ * - आपकी विशेषता की शुरुआत में "डेटा-" होना चाहिए, जिसका मूल्य आप बदलना चाह रहे हैं।

Question 9

इसी तरह की समस्या थी, मैं प्रस्ताव करता हूं कि इस समाधान का समर्थन IE 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 का उपयोग कर रहा था तो html डेटा टैग को अपडेट न करने की मेरे पास एक ही समस्या थी लेकिन कोड को बदलना जो कि jquery से जावास्क्रिप्ट में काम करता है, ने काम किया।

बटन क्लिक करने पर इसका उपयोग करने का प्रयास करें: (ध्यान दें कि मुख्य कोड Javascripts setAttribute () फ़ंक्शन है।)

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);

});