Не удается обновить значение атрибута данных

Хотя в Интернете есть несколько примеров этого, похоже, что это работает некорректно. Я не могу понять в чем проблема.

У меня есть этот простой 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)

Используйте это вместо этого, если вы хотите изменить номер данных атрибута элемента узла, а не объекта данных :

ДЕМО

$('#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() его он будет общедоступным.

Более четкое объяснение этого комментария

Этот ответ предназначен для тех, кто хочет просто изменить значение атрибута данных.

Предлагаемое не изменит значение вашего атрибута данных JQuery правильно, как заявил @adeneo. Однако по какой-то причине я не вижу, чтобы он (или кто-либо другой) опубликовал правильный метод для тех, кто хочет обновить свой data-attr. Ответ, который опубликовал @Lucas Willems, может быть ответом на проблему Брайана Томпсетта - 汤 莱恩, но это не ответ на запрос, который может привести сюда других пользователей.

Быстрый ответ на исходный запрос

-Для обновления data-attr

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

Легкие ошибки * - в начале атрибута, значение которого вы хотите изменить, должны быть "данные-".

Если бы возникла аналогичная проблема, я предлагаю это решение, хотя оно не поддерживается в IE 10 и ниже.

Дано

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

Стандарт Javascript определяет свойство, называемое набором данных, для обновления 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);

});