ไม่สามารถอัปเดตค่า data-attribute

แม้ว่าจะมีตัวอย่างบางส่วนเกี่ยวกับเรื่องนี้บนเว็บ แต่ดูเหมือนว่าจะทำงานไม่ถูกต้อง ฉันคิดปัญหาไม่ออก

ฉันมี html ง่ายๆนี้

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

ทุกครั้งที่คลิกลิงก์ "เปลี่ยนค่าข้อมูล" ฉันต้องการอัปเดตค่าข้อมูลของ data-num ตัวอย่างเช่นฉันต้องการให้เป็น 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 ทุกครั้ง ฉันไม่สามารถเพิ่มจำนวนได้ ข้อเสนอแนะสิ่งที่ฉันทำผิด?

คำตอบด้านล่างคือคำตอบที่ดี

คุณใช้วิธีการข้อมูลไม่ถูกต้อง รหัสที่ถูกต้องในการอัปเดตข้อมูลคือ:

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

ตัวอย่างของคุณจะเป็น:

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

ใช้สิ่งนี้แทนหากคุณต้องการเปลี่ยนแอตทริบิวต์ data-num ขององค์ประกอบโหนดไม่ใช่ของ data object :

การสาธิต

$('#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: แต่คุณควรใช้วัตถุ data () ในแทบทุกกรณี แต่ไม่ใช่ทั้งหมด ...

หากเราต้องการดึงข้อมูลหรืออัปเดตแอตทริบิวต์เหล่านี้โดยใช้JavaScriptดั้งเดิมที่มีอยู่เราสามารถทำได้โดยใช้getAttributeและsetAttributeวิธีการดังที่แสดงด้านล่าง:

JavaScript

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

อ่านเอกสารนี้สำหรับ vanilla jsหรือเอกสารสำหรับ jquery

สำหรับตัวฉันเองการใช้ Jquery lib 2.1.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"]') ได้ในภายหลัง // ความยาวปัจจุบันคือ 0

ผมจึงต้องทำ

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

ในการรับ DOM เพื่ออัปเดต:

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

ไม่ว่าจะมีแอตทริบิวต์อยู่หรือไม่ $ .attr จะเขียนทับ

มีปัญหาที่คล้ายกันและในที่สุดฉันต้องตั้งค่าทั้งสองอย่าง

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

และ

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

และหลังจากนี้

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

หวังว่านี่จะช่วยได้

โดยทั่วไปมีสองวิธีในการตั้งค่า / อัปเดตค่าแอตทริบิวต์ข้อมูลขึ้นอยู่กับความต้องการของคุณ ความแตกต่างอยู่ที่ข้อมูลที่บันทึกไว้

หากคุณใช้.data()มันจะถูกบันทึกในตัวแปรภายในที่เรียกว่าdata_userและจะไม่ปรากฏให้เห็นเมื่อตรวจสอบองค์ประกอบหากคุณใช้.attr()มันจะปรากฏต่อสาธารณะ

คำอธิบายที่ชัดเจนกว่ามากเกี่ยวกับความคิดเห็นนี้

คำตอบนี้มีไว้สำหรับผู้ที่ต้องการเปลี่ยนค่าของ data-attribute

ข้อเสนอแนะจะไม่เปลี่ยนค่าของ Jquery data-attr ของคุณอย่างถูกต้องตามที่ @adeneo ระบุไว้ ด้วยเหตุผลบางประการฉันไม่เห็นเขา (หรือคนอื่น ๆ ) โพสต์วิธีการที่ถูกต้องสำหรับผู้ที่ต้องการอัปเดต data-attr คำตอบที่ @Lucas Willems โพสต์อาจเป็นคำตอบสำหรับปัญหาที่ Brian Tompsett - 汤莱恩กำลังมีอยู่ แต่ไม่ใช่คำตอบสำหรับคำถามที่อาจนำผู้ใช้รายอื่นมาที่นี่

คำตอบอย่างรวดเร็วเกี่ยวกับคำชี้แจงการสอบถามต้นฉบับ

- เพื่ออัปเดตข้อมูล -tr

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

ข้อผิดพลาดง่าย ๆ * - ต้องมี "data-" ที่จุดเริ่มต้นของแอตทริบิวต์ของคุณที่คุณต้องการเปลี่ยนค่า

มีปัญหาที่คล้ายกันฉันเสนอวิธีแก้ปัญหานี้แม้ว่าจะไม่รองรับใน IE 10 และต่ำกว่า

ให้

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

มาตรฐาน Javascript กำหนดคุณสมบัติที่เรียกว่า dataset เพื่ออัพเดต data-example-update

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

หมายเหตุ: ใช้สัญลักษณ์กรณีอูฐเพื่อเข้าถึงแอตทริบิวต์ข้อมูลที่ถูกต้อง

ที่มา: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

ฉันมีปัญหาเดียวกันกับแท็กข้อมูล html ที่ไม่อัปเดตเมื่อฉันใช้ jquery แต่การเปลี่ยนรหัสที่ทำงานจริงจาก jquery เป็น javascript ได้

ลองใช้สิ่งนี้เมื่อคลิกปุ่ม: (โปรดทราบว่าโค้ดหลักคือฟังก์ชัน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);

});