☰

jQuery Data() API を使用してデータ属性を設定できません 質問する

tag-icon • tag-icon jquery model-view-controller attributes custom-data-attribute
jQuery Data() API を使用してデータ属性を設定できません 質問する

MVC ビューに次のフィールドがあります。

@Html.TextBoxFor(model => model.Course.Title, new { data_helptext = "Old Text" })</span>

別の js ファイルで、data-helptext属性を文字列値に設定したいと思います。コードは次のとおりです。

alert($(targetField).data("helptext"));

$(targetField).data("helptext", "Testing 123");

呼び出しalert()は正常に機能し、警告ダイアログに「Old Text」というテキストが表示されます。ただし、属性をdata-helptext「Testing 123」に設定する呼び出しは機能しません。「Old Text」は依然として属性の現在の値です。

data() の呼び出しを間違って使用していますか? Web で調べましたが、何が間違っているのかわかりません。

HTML マークアップは次のとおりです。

<input data-helptext="Old Text" id="Course_Title" name="Course.Title" type="text" value="" />

ベストアンサー1

それは、.data()ドキュメンテーション

データ属性は、データプロパティが最初にアクセスされたときに取得され、その後はアクセスも変更もされなくなります（すべてのデータ値はjQueryの内部に保存されます）。

これについては、jQuery $.fn.data() を変更しても、対応する html 5 data-* 属性が更新されないのはなぜですか?

以下の私の最初の回答のデモはもう動作していないようです。

更新された回答

再び、.data()ドキュメンテーション

jQuery 1.6 では、埋め込まれたダッシュを含む属性の処理が、W3C HTML5 仕様に準拠するように変更されました。

したがって、<div data-role="page"></div>次のことは正しい。$('div').data('role') === 'page'

以前はうまくいったと確信しています$('div').data('data-role')が、今はそうではないようです。コンソールを開くのではなく、HTMLにログを記録するよりよいショーケースを作成し、camelCaseにマルチハイフンの例を追加しました。データ属性変換。

デモを更新しました (2015-07-25)

こちらもご覧くださいjQuery Data と Attr の違いは何ですか?

html

<div id="changeMe" data-key="luke" data-another-key="vader"></div>
<a href="#" id="changeData"></a>
<table id="log">
    <tr><th>Setter</th><th>Getter</th><th>Result of calling getter</th><th>Notes</th></tr>
</table>

JavaScript(jQuery 1.6.2 以上)

var $changeMe = $('#changeMe');
var $log = $('#log');

var logger;
(logger = function(setter, getter, note) {
    note = note || '';
    eval('$changeMe' + setter);
    var result = eval('$changeMe' + getter);
    $log.append('<tr><td><code>' + setter + '</code></td><td><code>' + getter + '</code></td><td>' + result + '</td><td>' + note + '</td></tr>');
})('', ".data('key')", "Initial value");

$('#changeData').click(function() {
    // set data-key to new value
    logger(".data('key', 'leia')", ".data('key')", "expect leia on jQuery node object but DOM stays as luke");
    // try and set data-key via .attr and get via some methods
    logger(".attr('data-key', 'yoda')", ".data('key')", "expect leia (still) on jQuery object but DOM now yoda");
    logger("", ".attr('key')", "expect undefined (no attr <code>key</code>)");
    logger("", ".attr('data-key')", "expect yoda in DOM and on jQuery object");

    // bonus points
    logger('', ".data('data-key')", "expect undefined (cannot get via this method)");
    logger(".data('anotherKey')", ".data('anotherKey')", "jQuery 1.6+ get multi hyphen <code>data-another-key</code>");
    logger(".data('another-key')", ".data('another-key')", "jQuery < 1.6 get multi hyphen <code>data-another-key</code> (also supported in jQuery 1.6+)");

    return false;
});

$('#changeData').click();

古いデモ

元の回答

この HTML の場合:

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

そしてこのJavaScript（jQuery 1.6.2を使用）

console.log($('#foo').data('helptext'));

$('#changeData').click(function() {
    $('#foo').data('helptext', 'Testing 123');
//  $('#foo').attr('data-helptext', 'Testing 123');
    console.log($('#foo').data('data-helptext'));
    return false;
});

デモを見る

使用方法Chrome 開発ツール コンソールDOMを検査するには、$('#foo').data('helptext', 'Testing 123'); ではない表示されている値を更新しますコンソールしかし$('#foo').attr('data-helptext', 'Testing 123');、そうします。

おすすめ記事