98

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

4

9 に答える 9

123

data object ではなく node 要素の属性 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() オブジェクトを使用する必要がありますが、すべてではありません...

于 2013-07-20T13:50:24.560 に答える
68

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

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

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

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

var num = $('#foo').data("num") + 1;       
console.log(num)       
$('#foo').data('num', num); 
console.log(num)
于 2013-07-20T13:50:14.720 に答える
9

同様の問題があり、最終的に両方を設定する必要がありました

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

と

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

そしてこの後

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

お役に立てれば。

于 2017-01-11T08:20:09.240 に答える
2

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

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

元の照会文に関するクイックアンサー

-data-attr を更新するには

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

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

于 2017-01-06T00:00:36.530 に答える
2

jqueryを使用していたときにhtmlデータタグが更新されないという同じ問題がありましたが、実際の作業を行うコードを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);

});
于 2019-06-27T10:27:07.690 に答える