Question

我正在处理的页面当前生成一个带有初始值集的div，在data-*属性中存储为JSON：

JSON是：

{"name":"Qm9i","gen":"1","level":"4","topic":"","checked":"eyIxIjoiNCIsIjciOiI0IiwiOCI6IjQiLCI5IjoiNCJ9","pronoun":"2"}

在这样的元素中：

<div id="comment-1" class="container-element" data-all="{&quot;name&quot;:&quot;Qm9i&quot;,&quot;gen&quot;:&quot;1&quot;,&quot;level&quot;:&quot;4&quot;,&quot;topic&quot;:&quot;&quot;,&quot;checked&quot;:&quot;eyIxIjoiNCIsIjciOiI0IiwiOCI6IjQiLCI5IjoiNCJ9&quot;,&quot;pronoun&quot;:&quot;2&quot;}">

有许多这些div具有唯一的ID，用户可以在最终输出之前对div中的内容进行最终编辑（并且更改会反映在数据属性中）。

当用户单击EDIT时，将调用以下函数：

// Get the id of the current comment block
var index = getIndex($(this).attr('id'));
var commentFrame = $('#comment-' + index);


var fr = commentFrame.attr('id');
console.log("Edit button for " + fr + " was clicked...");

var b64 = commentFrame.data('all').checked;
var lvl = commentFrame.data('all').level;

console.log("Retrieved from the bottom of the container...")
console.log("level: " + lvl + " , checked: " + b64 + " or " + atob(b64));

//rest of code here

（对于丰富的日志语句道歉 - 我现在试图调试这一段很长一段时间了）

首次单击EDIT按钮时，代码似乎正确执行，并且检索数据，如控制台日志中所示......

Edit button for comment-1 was clicked...
Retrieved from the bottom of the container...
level: 4 , checked: eyIxIjoiNCIsIjciOiI0IiwiOCI6IjQiLCI5IjoiNCJ9 or {"1":"4","7":"4","8":"4","9":"4"}

...对div的内容进行了编辑，并使用另一个函数中的新值更新了data属性

var details = JSON.parse(parent.attr('data-all'));    
details.checked = fdata.checked;    //new value for 'checked'              
details.level = avg.toFixed(2);     //new value for 'level' 

// update everything...                
parent.attr('data-all', JSON.stringify(details));

...这会立即反映在div的数据属性中（'level'和'checked'都已更改。

<div id="comment-1" class="container-element" data-all="{&quot;name&quot;:&quot;Qm9i&quot;,&quot;gen&quot;:&quot;1&quot;,&quot;level&quot;:&quot;3.25&quot;,&quot;topic&quot;:&quot;&quot;,&quot;checked&quot;:&quot;eyIxIjoiMSIsIjciOiIzIiwiOCI6IjQiLCI5IjoiNSJ9&quot;,&quot;pronoun&quot;:&quot;2&quot;}">

...然而

当您在先前编辑的div上单击编辑时出现问题（例如，如果用户第二次改变主意）。

正如人们所料，上面的代码块完全相同，但不是从数据属性返回更新的“级别”和“已检查”值，而是返回初始值对于“级别”和“已检查”，它们在早期编辑中已在标记中过度使用，不应再被访问。

Edit button for comment-1 was clicked...
Retrieved from the bottom of the container...
level: 4 , checked: eyIxIjoiNCIsIjciOiI0IiwiOCI6IjQiLCI5IjoiNCJ9 or {"1":"4","7":"4","8":"4","9":"4"}

我一直在绞尽脑汁，盯着这一段时间，现在却无处可去，所以我希望这里的好人能够提出一个关于我可能出错的地方的建议。

Answer 1

data 不是data-*属性的访问者。它访问和管理jQuery的数据缓存，该数据缓存是从data-*属性初始化，但完全与它们断开连接。对于很多人来说，这是一个混乱点。

如果您想使用实际属性，请在代码中始终使用attr("data-all")。

如果您想为元素使用jQuery的数据缓存，请在代码中始终使用data("all")。

如果您在代码中混合使用attr("data-all")和data("all")，则会得到不一致的结果。

更简单的例子：

＆＃13;

var d = $("#foo");
console.log("d.attr('data-all'): " + d.attr("data-all"));
console.log("d.data('all'): " + d.data("all"));
console.log("Updating the data cache doesn't update the attribute:");
d.data("all", "data updated");
console.log("d.attr('data-all'): " + d.attr("data-all"));
console.log("d.data('all'): " + d.data("all"));
console.log("Updating the attribute doesn't update the data cache:");
d.attr("data-all", "attr updated");
console.log("d.attr('data-all'): " + d.attr("data-all"));
console.log("d.data('all'): " + d.data("all"));

＆＃13;

<div id="foo" data-all="initial"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

可以读取初始数据属性（data- *），但无法读取更新的数据属性

1 个答案: