jQuery改变类，但css不变

Question

我刚开始学习如何用jQuery改变类。在我的示例中，六边形改变了DOM中的类，但没有应用CSS。我是不是漏掉了什么明显的东西？

谢谢你抽出时间！

null

$('#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>

null

Answer 1

两件事。

>

和 具有相同的CSS

.clicked {
  fill: #0000FF;
}

.unclicked {
 fill: #0000FF;
}

要使其正常工作，要么在JQuery中使用 ，要么最初避免内联样式并在CSS文件中应用样式。另外，在这两种情况下，您肯定需要使用不同的 颜色。

Answer 2

尝试将 添加到样式规则中。

这是因为您还在路径的style属性中设置了fill，这将覆盖类中的fill规则

Answer 3

问题在于您使用了内联的 属性，这些属性覆盖了任何外部样式规则。

要解决这个问题，您需要组织您的CSS，使 和 的规则足够具体，以覆盖任何默认样式。您还需要使这两个类的 颜色不同，因为在您的示例中，它们是相同的，不会有任何区别。请尝试以下操作:

null

$('.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>