JQuery 数据选择器不使用 .data 更新答案

【问题标题】：JQuery data selector not updating with .dataJQuery 数据选择器不使用 .data 更新
【发布时间】：2012-04-03 19:40:49
【问题描述】：

基本上，如果我将一个 div 加载到具有 data-test 属性的页面上并使用 jquery 的 .data('test') 更改它的值，我将无法再选择带有 $('div[data-test="newValue"]') 的元素

var howMany = $('.t[data-test="test"]').length;
$('.result').html('start there are ' + howMany + ' divs with data "test"<br /><br />');
setTimeout(function() {
  $('#one, #three').data('test', 'changed');
}, 500);
setTimeout(function() {
  var test = $('.t[data-test="test"]').length,
    changed = $('.t[data-test="changed"]').length;
  $('.result').append('there are ' + test + ' divs still with data "test"<br /><br />there are ' + changed + ' divs still with data "changed"<br /><br />');
}, 1000);
setTimeout(function() {
  $('.t').each(function() {
    $('.result').append('div #' + $(this).attr('id') + ' has the test data of: ' + $(this).data('test') + '<br /><br />');
  });
}, 1500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="t" id="one" data-test="test">1</div>
<div class="t" id="two" data-test="test">2</div>
<div class="t" id="three" data-test="test">3</div>
<div class="t" id="four" data-test="test">4</div>
<div class="result"></div>

【问题讨论】：

这可能有助于archive.plugins.jquery.com/project/dataSelector

标签： jquery html jquery-selectors

【解决方案1】：

jQuery .data() 最初填充了来自data- 属性的值，但设置它只会将相关的新值存储在内存中。它不会更改 DOM 中的属性。要更改属性，您必须使用：

$('#one, #three').attr('data-test', 'changed');

文档位于http://api.jquery.com/jQuery.data/

【讨论】：

好的，所以.data 实际上并没有操作 DOM，它只是将数据保存在内存中？
它可以用于任何元素并且可以存储任意数据（不仅仅是字符串）。它与“data-”属性相关的唯一方式是，为方便起见，它会自动填充这些字符串。
哇，这让我发疯了。我可以在 chrome 开发工具中进行测试并查看值，但在页面上查看并没有看到任何变化。非常令人沮丧，特别是因为 jquery 文档说您可以进行更改但没有提及这种特质。
谁决定“设置它只将关联的新值存储在内存中。它不会更改 DOM 中的属性。”？这似乎很奇怪的功能。为什么不保持更新。
不仅如此，缓存初始化后不会去更新。因此，例如，如果您调用.data()，然后设置或更改数据属性，那么未来对同一元素的.data() 调用将不会反映这些新值。修改后的值永远不会被拉入缓存，新值也不会出现，除非通过名称.data('foo') 询问。

【解决方案2】：

那是因为我认为.data() 在 jQuery 中使用一个特殊的缓存对象来存储数据（实际上你可以存储对象或复杂的数据），如果你检查所有属性都没有改变的话。如果要更改属性，请使用attr()

【讨论】：