javascript - JQuery 不过滤 DOM 更改

Question

我有一个调查问卷页面，一些 div 添加了 data-answered 属性，如下所示:

<div class="question" data-answered="False">
   ... rest of the html
</div>

现在我有几个这样的东西，在某些时候，通过 js (你可以阅读 JQuery)我这样做:

myDiv.data("answered", "True")

请假设我有办法获取实际的 div 这不是这里的问题。现在，当我检查 js 局部变量时，我可以看到实际的 data-answered 属性设置为 "True"，但 DOM 浏览器什么也没显示。然而，当我需要回答的问题计数如下时，问题就出现了:

var answeredCount = $('[data-answered=True]').length

然后，无论我做了多少更改，我总是与页面首次加载时相同的元素/结果/计数。但是，如果我执行以下操作:

var answeredCount = $('[data-answered]')
      .filter(function () { return $(this).data('answered') == 'True' })
      .length

然后我得到了我期望的结果。我将在实际浏览器上添加带有一些数据的图像，以证明我刚才所说的支持我的主张:

注意:这种行为似乎发生在 Opera 和 Edge 上，因为我在 Chrome 上尝试过并且它按我的预期工作，还没有尝试过 Firefox。

这是预期的行为吗？
我是否误解了 JQuery 如何与 DOM 一起工作及其变化？
难道只有这两种浏览器的特殊之处吗？

Answer 1

要处理 data- 属性，您应该将其设置为 .attr方法。像这样:

myDiv.attr("data-answered", "True")

现在，$('[data-answered=True]') 应该可以工作了。

那是因为.data()将数据存储到内部 jQuery 位置，并且不会将 data- 属性添加到 DOM。

另一方面，要检索数据，.data(key) 都返回使用 .data(key,value) 或 data- 分配的数据。 属性。来自文档:

Return the value at the named data store for the first element in the jQuery collection, as set by data(name, value) or by an HTML5 data-* attribute.