0

jQuery 1.7.2 を使用して、データ モデルが更新されたときにdata-*要素の属性を更新するにはどうすればよいですか?

例えば：

$('el').attr('data-x', 400);
var data = $('el').data( );
data.x += 100;

を変更し$(el).data()ても、変更が要素のdata-*属性に反映されるようには見えません。

なぜ私はこれが欲しいのですか？最新のデータで組み込みの jQuery セレクターを使用したいと思います。

4

3 に答える 3

4

次のように実行できます。

$('el').attr('data-x', 400);
于 2012-08-18T04:03:17.003 に答える
2

属性値を直接操作する場合を除いて、データを要素の属性にプッシュバックする理由はありません（jQuery以外のプラグインなど）。[data-*]変更はクライアント側でのみ行われるため、属性から取得した値を単純にキャッシュする方がはるかにパフォーマンスが高くなります。

どうしても属性値を更新する必要.attr()がある場合は、このメソッドを使用する必要があります。

さらに、データを取得するときは、.data()メソッドがコンテンツのデータ型の種類を把握しようとすることを知っておくことが重要です。

<div data-foo="bar" data-baz="0" data-fizz='{"a":"b"}' data-bool="true"></div>

$('div').data('foo');       //returns "bar"
$('div').attr('data-foo');  //returns "bar"

$('div').data('baz');       //returns 0
$('div').attr('data-baz');  //returns "0"

$('div').data('fizz');      //returns {"a":"b"} as an object
$('div').attr('data-fizz'); //returns "{\"a\":\"b\"}"

$('div').data('bool');      //returns true
$('div').attr('data-bool'); //returns "true"
于 2012-08-18T04:06:53.530 に答える
1

属性を操作するには、他の属性値と同じメソッドdata-*を使用します。attr(name,value)

設定するには：

$('#myDiv').attr('data-name', 'bob');

それを取得するには：

var name = $('#myDiv').attr('data-name');

data-* 属性と$(..).data()関数の違いは、属性には文字列値のみを含めることができるのに対し、jQueryのdata()関数では実際のjavascriptオブジェクトをアタッチ（および後で取得）できることです。

var obj = { 
  name: bob, age: 27,
  foo: function() { ... }
};
$('#myDiv').data('some.identifier', obj);

// then later
var obj2 = $('#myDiv').data('some.identifier');

console.log(obj2 === obj);  // true!
于 2012-08-18T04:08:17.257 に答える