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>