データ属性値を更新できません

これに関するいくつかの例がWebにありますが、正しく機能していないようです。私は問題を理解することができません。

私はこの単純な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に1回変化します。インクリメンタルにすることはできません。私が間違っていることについて何か提案はありますか？

以下の答えは良いものです

データメソッドを正しく使用していません。データを更新するための正しいコードは次のとおりです。

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

したがって、あなたの例は次のようになります。

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

代わりに、データオブジェクトではなくノード要素の属性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（）オブジェクトを使用する必要があります...

既存のネイティブ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'); 

バニラ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')

お役に立てれば。

基本的に、データ属性値を設定/更新する方法は2つあり、必要に応じて異なります。違いは、データが保存された場所だけです。

使用する.data()場合はdata_user、と呼ばれるローカル変数に保存され、要素の検査時に表示されません。使用する場合.attr()。場合は、公開されます。

このコメントに関するより明確な説明

この答えは、データ属性の値を変更したいだけの人のためのものです

@adeneoが述べているように、提案はJquerydata-attrの値を正しく変更しません。しかし、何らかの理由で、彼（または他の人）がデータ属性を更新しようとしている人のために正しい方法を投稿しているのを見ていません。@Lucas Willemsが投稿した答えは、Brian Tompsett-汤莱恩が抱えている問題への答えかもしれませんが、他のユーザーをここに連れてくるかもしれない質問への答えではありません。

元の問い合わせステートメントに関するクイックアンサー

-データ属性を更新するには

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

簡単な間違い*-値を変更しようとしている属性の先頭に「data-」が必要です。

同様の問題があったので、IE 10以下ではサポートされていませんが、このソリューションを提案します。

与えられた

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

Javascript標準では、data-example-updateを更新するためのdatasetというプロパティが定義されています。

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

注：正しいデータ属性にアクセスするには、キャメルケース表記を使用してください。

ソース：https：//developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

jqueryを使用しているときにhtmlデータタグが更新されないという同じ問題がありましたが、実際の作業を行うコードをjqueryからjavascriptに変更しても機能しました。

ボタンがクリックされたときにこれを使用してみてください:(メインコードはJavascriptssetAttribute （）関数であることに注意してください）。

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

});