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

我正在处理的一个页面当前生成一个带有初始值集的div，该值作为JSON存储在

data-*

属性中：

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;}">

（抱歉日志语句太多-我已经试着调试了很长一段时间了）

当第一次单击编辑按钮时，代码似乎正确执行，并且检索数据，如控制台日志中所示

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的内容进行编辑，并使用另一个函数中的新值更新数据属性

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的data属性中（“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;}"> 

---

我绞尽脑汁盯着这件事已经有一段时间了，但一无所获，所以我希望这里的好人能够就我可能出错的地方提出建议。

数据是而不是
数据-*
属性的访问器。它访问并管理jQuery的数据缓存，以便元素，它是从
数据-*
属性初始化的，但在其他方面与属性完全断开连接。这对于许多人来说是一个混淆点

如果要使用实际属性，请在代码中一致使用
attr（“data all”）

如果要对元素使用jQuery的数据缓存，请在代码中一致地使用
data（“all”）

如果在代码中混合使用
attr（“data all”）
和
data（“all”）
，则会得到不一致的结果

更简单的例子：


vard=$（“#foo”）；
console.log（“d.attr（'data-all'）：“+d.attr（'data-all”）；
console.log（“d.data（'all'）：“+d.data（'all”）；
log（“更新数据缓存不会更新属性：”）；
d、 数据（“全部”、“数据更新”）；
console.log（“d.attr（'data-all'）：“+d.attr（'data-all”）；
console.log（“d.data（'all'）：“+d.data（'all”）；
log（“更新属性不会更新数据缓存：”）；
d、 属性（“所有数据”、“属性更新”）；
console.log（“d.attr（'data-all'）：“+d.attr（'data-all”）；
console.log（“d.data（'all'）：“+d.data（'all”）；
数据
不是
数据-*
属性的访问器。它访问并管理jQuery元素的数据缓存，该元素是从
数据-*
属性初始化的，但在其他方面与属性完全断开。这对于许多人来说是一个困惑点

如果要使用实际属性，请在代码中一致使用
attr（“data all”）

如果要对元素使用jQuery的数据缓存，请在代码中一致地使用
data（“all”）

如果在代码中混合使用
attr（“data all”）
和
data（“all”）
，则会得到不一致的结果

更简单的例子：


vard=$（“#foo”）；
console.log（“d.attr（'data-all'）：“+d.attr（'data-all”）；
console.log（“d.data（'all'）：“+d.data（'all”）；
log（“更新数据缓存不会更新属性：”）；
d、 数据（“全部”、“数据更新”）；
console.log（“d.attr（'data-all'）：“+d.attr（'data-all”）；
console.log（“d.data（'all'）：“+d.data（'all”）；
log（“更新属性不会更新数据缓存：”）；
d、 属性（“所有数据”、“属性更新”）；
console.log（“d.attr（'data-all'）：“+d.attr（'data-all”）；
console.log（“d.data（'all'）：“+d.data（'all”）；

data all=“{”name:“Qm9i”，“gen:“1”，“level:“4”，“topic:”checked:“eyijijoincii0iiiwioci6ijqilci5ijjoincj9”，“denome:”2“}”
将不起作用。您必须决定使用单外引号和双内引号，反之亦然。
data all=“{”name:“Qm9i”，“gen:”1”，“level:“4”，“topic:”checked:““代词”：“2”}”
不起作用。你必须决定使用单外引号和双内引号，反之亦然。在他的HTML
data all
属性中使用引号字符不是问题吗？@connexo:当然，如果HTML真的是这样的话，这也是个问题。问题的内容表明，这不是尽管HTML确实如此（尽管在问题中是这样显示的），但考虑到它最初的工作原理：“当第一次单击编辑按钮时，代码似乎正确执行，并且检索数据。”所以我把这归结为在问题代码中把事情搞砸了。@T.J.克劳德-感谢您对使用attr（“全部数据”）和数据（“全部数据”）之间的区别所作的非常清楚的解释。我怀疑这方面有什么问题，感觉有点幼稚，但很高兴知道这对其他人来说也是一个混淆点。@connexo-原始JSON字符串是使用JSON.stringify生成的-每个元素的实际包装是“-为了可读性，我在帖子中替换了。OPs在他的HTML
data all
属性中使用引号字符不是问题吗？@connexo：当然，如果HTML真的是这样的话，这也是一个问题。不过，问题的内容表明，这与HTML的实际情况无关（尽管在问题中有这样的表现），给出了这样一句话：“当第一次单击“编辑”按钮时，代码似乎执行正确，数据也被检索到了。”因此，我将其归结为问题代码中的混乱。@T.J.Crowder-感谢您对使用attr（“数据全部”）和数据（“全部”）之间的区别所作的非常清楚的解释。我怀疑这其中有点道理，感觉有点空洞，但很高兴知道这也会让其他人感到困惑。@connexo-原始JSON字符串是使用JSON.stringify生成的-每个元素的实际包装是”-为了可读性，我在帖子中替换了它。
<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;}"> 

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"}