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

Хоча є кілька прикладів про це в Інтернеті, схоже, це не працює належним чином. Я не можу зрозуміти проблему.

У мене є цей простий 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 кожного разу. Я не можу зробити це додатковим. Будь-які пропозиції, що я роблю не так?

ВІДПОВІДЬ ВНИЗ - ХОРОШИЙ

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

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

Отже, вашим прикладом буде:

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

Використовуйте це замість цього, якщо ви хочете змінити атрибут data-number елемента вузла, а не об'єкта даних :

ДЕМО

$('#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 data-attr правильно, як заявив @adeneo. Хоча з якихось причин я не бачу його (чи будь-якого іншого), що публікує правильний метод для тих, хто прагне оновити свої дані. Відповідь, яку опублікував @Lucas Willems, може бути відповіддю на проблему Брайана Томпсетта - 汤 莱恩, але це не відповідь на запит, який може залучати сюди інших користувачів.

Швидка відповідь щодо оригінальної заяви про запит

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

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

Легкі помилки * - на початку атрибута, для якого ви хочете змінити значення, повинні бути "data-".

Маючи подібну проблему, я вважаю, що це рішення не підтримується в 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);

});