無法更新數據屬性值

儘管在網絡上有這方面的一些示例，但它似乎無法正常工作。我無法弄清楚這個問題。無法更新數據屬性值

我有這個簡單的HTML

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

我每次點擊鏈接「更改數據」我想更新數據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。我無法讓它增量。任何建議我做錯了什麼？

來源

2013-07-20 dev

data-只是頁面加載時的一個屬性。數據被加載到dom中並使用'.data（）'在那裏操作。該屬性未更新，不應用於存儲或檢索數據，僅用於初始設置數據。 –

@NigelAngel錯了。數據屬性的目的是提供一種方法，用戶可以通過這種方式存儲（並修改）沒有任何其他有效位置的任意數據。例如，當小數點是逗號時，這將是外幣。要用這個數字計算，你必須在某處存儲一個具有實際小數點的適當值。如果這是一個總價格並需要根據變化進行更新，那麼這個數據值將不得不改變，因此您需要能夠更新它。爲此，您將使用.attr（） – jezzipin

您沒有正確使用data method。正確的代碼更新的數據是：

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

所以，你的例子是：

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

來源

2013-07-20 13:50:14

+58

這是錯誤的，這是***錯誤的方法來更新屬性 – adeneo

我試過了，但它不起作用。我使用jquery 1.7 – dev

是的，我同意你@adeneo，但他沒有正確使用數據方法。如果你想用attr方法更新它，爲什麼要使用這種屬性？ –

使用，來代替，如果你想改變節點元素的屬性數據NUM，而不是數據對象：

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：不過你應該使用在幾乎所有情況下的數據（）對象，但不是所有的...

來源

2013-07-20 13:50:24

將數據加載到dom中並使用.data（）在那裏操作。該屬性未更新，不應用於存儲或檢索數據，僅用於初始設置數據。雖然這是改變屬性的一種方法（首選'.prop（）'），但這不是使用數據的正確方法。 –

@NigelAngel當'.prop（）'應該用於設置數據屬性時，我不明白嗎？順便說一句，你是正確的，通常必須使用'data（）'，但有時你需要更新DOM中的屬性以適應某些CSS規則，那麼這裏必須使用'attr（）'而不是'.prop（） '也不'.data（）'）。 –

↑↑↑這就是說，使用'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');

Read this documentation for vanilla js或this documentation for jquery

來源

2014-01-06 05:14:53

@Nigel天使，你在Firefox上測試過嗎？ $（this）.data（'fruit'）在firefox上不起作用。 –

非常感謝您的最後建議「您必須將其設置爲如下更新值，然後您將獲得更新值」在jQuery中的奇怪行爲.. – jgr

對於我來說，使用jQuery 2.1.1的lib下面沒有工作，我所期望的方式：

設置元素的數據屬性值：

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

但元素本身仍然沒有屬性：

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

我需要DOM更新，所以我可以稍後做 $（'。我的級[數據-NUM = 「myvalue的」]「）//目前的長度爲0

所以我不得不這樣做

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

爲了讓DOM更新：

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

該屬性是否存在$ .attr將被覆蓋。

來源

2014-11-23 23:05:22

我有與jquery 2.1.1相同的問題！ – phlegx

這個答案是爲那些尋求只是改變一個數據屬性

建議的正確的@adeneo曾表示不會改變你的jQuery的數據attr的值的值。不過，出於某種原因，我沒有看到他（或任何其他人）爲尋求更新其數據的人發佈正確的方法 - attr。 @Lucas Willems發佈的答案可能是問題的答案 - 湯萊恩有問題，但這不是查詢的答案，可能會將其他用戶帶到這裏。

的問候原來的查詢語句快速回答

- 要更新數據ATTR

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

容易出錯* - 必須有「數據 - 」之初你正在尋找改變價值的屬性。

來源

2017-01-06 00:00:36 MattOlivos

有類似的問題，最後我不得不同時設置

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

和

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

這

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

希望這有助於以後。

來源

2017-01-11 08:20:09

有一個類似的問題，我提出這個解決方案雖然在IE 10和以下版本中都不支持。

鑑於

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

JavaScript標準定義了一個稱爲數據集來更新數據例如更新屬性。

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

注意：使用駝峯符號表示法來訪問正確的數據屬性。

來源：https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

來源

2018-01-04 11:36:19

無法更新數據屬性值

回答

相關問題