Không thể cập nhật giá trị thuộc tính dữ liệu

Mặc dù có một số ví dụ về điều này trên web, nhưng nó dường như không hoạt động chính xác. Tôi không thể tìm ra vấn đề.

Tôi có html đơn giản này

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

Mỗi khi tôi nhấp vào liên kết "thay đổi giá trị dữ liệu", tôi muốn cập nhật giá trị dữ liệu của data-num. Ví dụ: tôi cần nó là 1,2,3,4, ... (cộng 1 mỗi khi tôi nhấp vào liên kết)

những gì tôi có là

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

Giá trị thay đổi một lần từ 0 đến 1 mỗi lần. Tôi không thể làm cho nó tăng dần. Bất kỳ đề xuất những gì tôi đang làm sai?

CÂU TRẢ LỜI DƯỚI ĐÂY LÀ CÂU TRẢ LỜI TỐT

Bạn không sử dụng đúng phương pháp dữ liệu . Mã chính xác để cập nhật dữ liệu là:

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

Vì vậy, ví dụ của bạn sẽ là:

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

Sử dụng điều đó thay thế, nếu bạn muốn thay đổi thuộc tính data-num của phần tử nút, không phải của đối tượng dữ liệu :

BẢN GIỚI THIỆU

$('#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);
});

Tái bút: nhưng bạn nên sử dụng đối tượng data () trong hầu hết mọi trường hợp, nhưng không phải tất cả ...

Nếu chúng tôi muốn truy xuất hoặc cập nhật các thuộc tính này bằng cách sử dụng JavaScript gốc, hiện có , thì chúng tôi có thể làm như vậy bằng cách sử dụng các phương thức getAttributevà setAttributenhư được hiển thị bên dưới:

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>

Thông qua 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'); 

Đọc tài liệu này cho vani js hoặc tài liệu này cho jquery

Đối với bản thân tôi, sử dụng Jquery lib 2.1.1, điều sau KHÔNG hoạt động như tôi mong đợi:

Đặt giá trị thuộc tính dữ liệu phần tử:

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

NHƯNG bản thân phần tử vẫn không có thuộc tính:

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

Tôi cần cập nhật DOM để sau này có thể thực hiện $ ('. My-class [data-num = "myValue"]') // chiều dài hiện tại là 0

Vì vậy, tôi phải làm

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

Để cập nhật DOM:

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

Thuộc tính có tồn tại hay không $ .attr sẽ ghi đè.

Gặp vấn đề tương tự và cuối cùng tôi phải đặt cả hai

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

và

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

Và sau này

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

Hi vọng điêu nay co ich.

Về cơ bản, có hai cách để thiết lập / cập nhật giá trị thuộc tính dữ liệu, tùy thuộc vào nhu cầu của bạn. Sự khác biệt chỉ là, nơi dữ liệu được lưu,

Nếu bạn sử dụng, .data()nó sẽ được lưu trong biến cục bộ được gọi là data_user, và nó sẽ không hiển thị khi kiểm tra phần tử, Nếu bạn sử dụng, .attr()nó sẽ hiển thị công khai.

Giải thích rõ ràng hơn nhiều về nhận xét này

Câu trả lời này dành cho những người muốn chỉ thay đổi giá trị của một thuộc tính dữ liệu

Đề xuất sẽ không thay đổi giá trị của Jquery data-attr của bạn một cách chính xác như @adeneo đã nêu. Tuy nhiên, vì một số lý do, tôi không thấy anh ấy (hoặc bất kỳ người nào khác) đăng phương pháp chính xác cho những người đang tìm cách cập nhật data-attr của họ. Câu trả lời mà @Lucas Willems đã đăng có thể là câu trả lời cho vấn đề Brian Tompsett - 汤 莱恩 đang gặp phải, nhưng nó không phải là câu trả lời cho câu hỏi có thể đưa những người dùng khác đến đây.

Câu trả lời nhanh liên quan đến tuyên bố yêu cầu ban đầu

-Để cập nhật data-attr

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

Những sai lầm dễ mắc phải * - phải có "data-" ở đầu thuộc tính mà bạn đang muốn thay đổi giá trị.

Gặp sự cố tương tự, tôi đề xuất giải pháp này mặc dù không được hỗ trợ trong IE 10 trở xuống.

Được

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

Tiêu chuẩn Javascript định nghĩa một thuộc tính được gọi là tập dữ liệu để cập nhật dữ liệu-ví dụ-cập nhật.

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

Lưu ý: sử dụng ký hiệu trường hợp lạc đà để truy cập thuộc tính dữ liệu chính xác.

Nguồn: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Tôi đã gặp vấn đề tương tự là thẻ dữ liệu html không cập nhật khi tôi đang sử dụng jquery Nhưng việc thay đổi mã thực sự hoạt động từ jquery sang javascript đã hoạt động.

Hãy thử sử dụng điều này khi nút được nhấp: (Lưu ý rằng mã chính là hàm 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);

});