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

Ответ 1

РЕДАКТИРОВАТЬ: ответ чуть ниже является хорошим.

Вы не используете метод данных правильно. Правильный код для обновления данных:

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

Итак, ваш пример будет:

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

Ответ 2

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

DEMO

$('#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() практически во всех случаях, но не все...

Ответ 3

Если мы хотим получить или обновить эти атрибуты с помощью существующего, родного 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

Ответ 4

Для себя, используя 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.

Ответ 5

Имел подобную проблему, и в конце концов мне пришлось установить оба

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

и

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

И после этого

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

Надеюсь, что это поможет.

Ответ 6

В принципе, есть два способа установить/обновить значение атрибута данных, в зависимости от ваших потребностей. Разница только в том, где данные сохранены,

Если вы используете .data() он будет сохранен в локальной переменной data_user, и он не будет виден при проверке элемента. Если вы используете .attr() он будет публично видим.

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

Ответ 7

Если бы была похожая проблема, я предлагаю это решение, хотя и не поддерживается в 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

Ответ 8

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

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

Быстрый ответ в отношении оригинальной инструкции запроса

-Для обновления данных-attr

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

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

Ответ 9

У меня была та же проблема с тегом html data, который не обновлялся при использовании jquery, но смена кода, выполняющего реальную работу, с jquery на javascript работала.

Попробуйте использовать это, когда кнопка нажата: (Обратите внимание, что основным кодом является функция setAttribute() Javascripts.)

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

});