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

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

у меня есть этот простой 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 каждый раз. Я не могу сделать это очень важно. Любые предложения, что я делаю неправильно?

7 64
jquery

7 ответов:

EDIT: ответ чуть ниже является хорошим.

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

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

Так что ваш пример будет выглядеть так:

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

использовать, что вместо Если вы хотите изменить атрибут data-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() практически во всех случаях, но не во всех...

85

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

23

для себя, используя 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, который будет перезаписывать.

10

была аналогичная проблема, и в конце концов мне пришлось установить оба 

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

и 

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

и после этого 

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

надеюсь, что это помогает.

3

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

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

быстрый ответ в отношении первоначального заявления дознания

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

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

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

0

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

дано 

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

стандарт Javascript определяет свойство dataset для обновления данных-пример-обновление. 

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

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

Источник: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

0