Question

我有一个具有以下自定义属性data-badge="1"的元素：

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

现在，我对此divs chis-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()之间的区别。总结一下：

.data()将从data- *属性中读取值，但写入将仅在内部进行更新（不适用于DOM）
.attr("data-*")将直接读取和写入DOM属性，这将影响可对其应用哪些CSS

用jquery修改自定义HTML属性不会影响CSS

1 个答案: