Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...