javascript - 用 jquery 修改自定义 HTML-Attribute 不影响 CSS

Question

我有一个带有自定义属性 data-badge="1" 的元素，如下所示:

<div id="badge" data-badge="1">
  <span></span>
</div>

现在我对这个 divs chils-span 的 :after 元素设置了一些 css 样式。但是只要 data-badge 属性为零，我就想隐藏 :after 元素。所以很自然地我将它添加到 CSS 中

#badge span:after {
    display: block;
    content: " ";
    ...
}

#badge[data-badge="0"] span:after {
   display: none;
}

如果我加载页面，这会很好地工作，但是一旦我使用 jquery 更改“data-badge”属性，该元素将不再被隐藏。什么会导致这种情况？

谢谢你的帮助

编辑:由于请求，这里还有 Jquery 代码:

$(".button").click(function(){
   $("#badge").data("data-badge","0");
});

(当然还有更多的 jquery 代码，但这实际上是唯一与此属性有关的部分。如果通过浏览器中的 jquery 更改 data-badge 属性，也会出现问题-控制台)

Answer 1

它看起来工作正常；

$(".button").click(function(){
   $("#badge").attr("data-badge","0");
});

#badge span:after {
    display: block;
    content: "text";
}
#badge[data-badge="0"] span:after {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="badge" data-badge="1">
  <span></span>
</div>
<button class="button">click me</button>

一定是有别的东西在干扰

---

编辑正如所评论的那样，问题似乎是 jQuery 中 .data() 和 .attr() 之间的区别。总结:

1. .data()将从 data-* 属性中读取值，但写入只会在内部更新(不适用于 DOM)
2. .attr("data-*")将直接读取和写入 DOM 属性，这将影响可以对其应用哪些 css