无法使用jQuery Data()API设置数据属性

Question

我在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()呼叫工作正常,它显示在警报对话框文本"古文字".但是,将data-helptext属性设置为"测试123" 的调用不起作用."旧文本"仍然是属性的当前值.

我是否错误地使用了对data()的调用？我在网上看了这个,我看不出我做错了什么.

这是HTML标记:

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

Answer 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 vs 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 DevTools 控制台检查DOM,$('#foo').data('helptext', 'Testing 123'); 不会更新控制台中显示的值,但$('#foo').attr('data-helptext', 'Testing 123');会更新.

Answer 2

我遇到了严重的问题

.data('property', value);

它没有设置data-property属性.

开始使用jQuery .attr():

获取匹配元素集中第一个元素的属性值,或为每个匹配元素设置一个或多个属性.

.attr('property', value)

设置值和

.attr('property')

检索值.

现在它正常运作!

Answer 3

@andyb接受的答案有一个小错误.继我对上述帖子的评论......

对于这个HTML:

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

您需要像这样访问属性:

$('#foo').attr('data-helptext', 'Testing 123');

但数据方法如下:

$('#foo').data('helptext', 'Testing 123');

上面针对.data()方法的修复将阻止"未定义"并且数据值将被更新(而HTML将不会)

"data"属性的要点是将值与元素绑定(或"链接").非常类似于将onclick="alert('do_something')"动作绑定到元素的属性...文本没用,您只需要在单击元素时使操作起作用.

一旦数据或动作绑定到元素,通常*不需要更新HTML,只需更新数据或方法,因为这是您的应用程序(JavaScript)将使用的.性能方面,我不明白为什么你还想要更新HTML,没有人看到html属性(Firebug或其他控制台除外).

您可能想要考虑的一种方式:HTML(以及属性)只是文本.JavaScript使用的数据,函数,对象等存在于单独的平面上.只有在指示JavaScript时,它才会读取或更新HTML文本,但您使用JavaScript创建的所有数据和功能都与您在Firebug(或其他)控制台中看到的HTML文本/属性完全分开.

*我经常强调,因为如果你有一个需要保存和导出HTML的例子(例如某种微格式/数据识别文本编辑器),HTML将在另一页上加载新鲜,那么你可能需要更新HTML太.

Answer 4

事情发生在我身上.事实证明

var data = $("#myObject").data();

给你一个不可写的对象.我解决了它:

var data = $.extend({}, $("#myObject").data());

从那时起,它data是一个标准的,可写的JS对象.