javascript - 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>

Answer 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>