jQuery changes classes but css does not change

Question

I am new at learning how to change classes with JQuery. In my example, the hexagons change classes in the DOM, but no CSS is applied. Am I missing something obvious?

Thank you for your time!

$('#hexagon1').click(function() {
  $(this).removeClass("unclicked");
  $(this).addClass("clicked");
});

$('#hexagon2').click(function() {
  $(this).removeClass("unclicked");
  $(this).addClass("clicked");
});

.clicked {
  fill: #0000FF;
}

.unclicked {
  fill: #0000FF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg viewBox="0 0 101.83981 74.999893" id="svg8">
  <g
     id="layer1"
     transform="translate(-28.970265,-13.579265)">
    <path
       style="opacity:1;fill:#ffb619;stroke-width:4.50001;stroke-linecap:round;stroke-miterlimit:7"
       id="hexagon1"
       d="M 43.906288,64.275181 28.970265,39.449215 43.002172,14.101257 71.9701,13.579265 86.906123,38.405231 72.874217,63.753189 Z" class="unclicked"/>
    <path
       style="opacity:1;fill:#008000;stroke-width:4.50001;stroke-linecap:round;stroke-miterlimit:7"
       id="hexagon2"
       d="M 87.810242,88.579156 72.874219,63.753189 86.906125,38.405231 115.87405,37.883239 130.81008,62.709205 116.77817,88.057164 Z" class="unclicked"/>
  </g>
</svg>

The inline style applied to the path is more specific so will override whatever you put in your class (you can see that when inspecting the element). Either use !important within your css class or use a class for the base style as well. I would recommend the latter — empiric
– empiric, Commented Jan 12, 2021 at 13:39

Rory McCrossan · Accepted Answer · 2021-01-12 13:44:40Z

1

The issue is because you have used inline style attributes which override any external style rules.

To fix this you need to organise your CSS so that the rules of .clicked and .unclicked are specific enough to override any default styling. You also need to make the fill colour of both of those classes different, as in your example they are identical and will make no difference. Try this:

$('.hexagon').click(function() {
  $(this).toggleClass("unclicked clicked"); // note the single use of toggleClass here
});

.hexagon {
  opacity: 1;
  stroke-width: 4.50001;
  stroke-linecap: round;
  stroke-miterlimit: 7;
}

.hexagon1 { fill: #ffb619; }
.hexagon2 { fill: #008000; }
svg path.clicked { fill: #0000FF; }
svg path.unclicked { fill: #CC0000; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg viewBox="0 0 101.83981 74.999893" id="svg8">
  <g id="layer1" transform="translate(-28.970265,-13.579265)">
    <path class="hexagon hexagon1 unclicked" d="M 43.906288,64.275181 28.970265,39.449215 43.002172,14.101257 71.9701,13.579265 86.906123,38.405231 72.874217,63.753189 Z" />
    <path class="hexagon hexagon2 unclicked" d="M 87.810242,88.579156 72.874219,63.753189 86.906125,38.405231 115.87405,37.883239 130.81008,62.709205 116.77817,88.057164 Z" />
  </g>
</svg>

answered Jan 12, 2021 at 13:44

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

1 Comment

Johnathan Over a year ago

Thank you for your help! It worked perfectly. I was making an obvious mistake. haha

fdomn-m · Accepted Answer · 2021-01-12 13:44:19Z

1

Try to add !important to the style rules.

This is because you also set fill in the style attribute of the paths which overwrites the fill rule from your classes

edited Jan 12, 2021 at 13:44

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

answered Jan 12, 2021 at 13:42

Fabian

956 bronze badges

1 Comment

Johnathan Over a year ago

Thank you for explaining it. I understand it now.

Imran Rafiq Rather · Accepted Answer · 2021-01-12 13:44:50Z

1

Two things.

you have inline-styles in both the cases, so all the properties in inline-style will not be applied as inline-styles have higher specifity.

Both unclicked and clicked have the same CSS

.clicked {
  fill: #0000FF;
}

.unclicked {
 fill: #0000FF;
}

To make it work either use !important in your JQuery or avoid inline-style initially and apply styles in a CSS file. Plus you definitely need to use different fill color in both the cases.

answered Jan 12, 2021 at 13:44

Imran Rafiq Rather

8,2881 gold badge23 silver badges41 bronze badges

Collectives™ on Stack Overflow

jQuery changes classes but css does not change

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related