Modify custom HTML-Attribute with jquery does not affect CSS

Question

I have an Element with the custom attribute data-badge="1" that looks like this:

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

Now I have some css styling the :after element of this divs chils-span. But as soon as the attribute data-badge is zero, I want to hide the :after element. So naturally I added this to the CSS

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

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

This works quite well if I load the page, but as soon as I change the "data-badge" attribute using jquery, the element will no longer be hidden. What can cause this?

Thank you for your help

EDIT: Due to a request, here is the Jquery-Code aswell:

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

(Of course there is way more jquery-code but this is literally the only part, that has anything to do with this attribute. And the problem occurs also, if the data-badge attribute is changed via jquery in the browser-console)

Unless you manually change the attribute, it is possible that jQuery does not actually change that value shown. — Travis J
– Travis J, Commented Aug 29, 2018 at 7:45
When you invoke $(...).data('badge', '0'), jQuery modified the dataset of the element, not the attribute you're willing to change. You'll have to use $(...).attr('data-badge', '0') instead — haim770
– haim770, Commented Aug 29, 2018 at 7:45
How are you changing the attribute? Please include the relevant js code...It's different if you're doing it with prop, attr, data, ... — gmo
– gmo, Commented Aug 29, 2018 at 7:46
@Juggernaut, It does work in this fiddle: jsfiddle.net/xpvt214o/698903. Did you make sure your click callback actually runs? — haim770
– haim770, Commented Aug 29, 2018 at 7:49

xec · Accepted Answer · 2018-08-29 08:08:10Z

4

It seems to work fine as is;

$(".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>

There must be something else interfering

Edit As commented, it seems the issue was the difference between .data() and .attr() in jQuery. To summarize:

.data() will read the value from data-* attributes, but writing will only update internally (will not apply to the the DOM)
.attr("data-*") will both read and write directly to the DOM attribute, which will affect what css can be applied to it

edited Aug 29, 2018 at 8:08

answered Aug 29, 2018 at 7:51

xec

18.1k3 gold badges50 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lumnezia Over a year ago

I was using $("#badge").data, instead of "attr", as @haim770 pointed out. Thank you for your help

haim770 Over a year ago

You summarized it well and it's useful for future readers just as mine

Collectives™ on Stack Overflow

Modify custom HTML-Attribute with jquery does not affect CSS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related