CODEWITHSUNDEEP
javascriptjquerycss
Johnathan
Johnathan

Reputation: 125

jQuery changes classes but css does not change

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>

Upvotes: 3

Views: 67

Answers (3)

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8078

Two things.

  1. 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.

  2. 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.

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

Upvotes: 1

Fabian
Fabian

Reputation: 95

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

Upvotes: 1

Related Questions