Javascript jQuery更改类，但css不更改

我刚学会如何使用JQuery更改类。在我的示例中，六边形改变了DOM中的类，但没有应用CSS。我错过了什么明显的东西吗

谢谢你抽出时间

$（'hexagon1'）。单击（函数（）{
$（this.removeClass（“unclicked”）；
$（此）.addClass（“单击”）；
});
$（'#六边形2'）。单击（函数（）{
$（this.removeClass（“unclicked”）；
$（此）.addClass（“单击”）；
});
。单击{
填充：#0000FF；
}
1.未扣{
填充：#0000FF；
}
尝试添加
！重要信息
，请参见样式规则

这是因为您还在路径的样式属性中设置了填充，该属性覆盖了类中的填充规则。问题是因为您使用了内联
样式
属性，这些属性覆盖了任何外部样式规则

要解决此问题，您需要组织CSS，以便
.clicked
和
.unclicked
的规则足够具体，可以覆盖任何默认样式。您还需要使这两个类的
fill
颜色不同，因为在您的示例中，它们是相同的，不会有任何区别。试试这个：


$（'.hexagon'）。单击（函数（）{
$（this）.toggleClass（“未点击”）；//注意这里使用的是toggleClass
});
.hexagon{
不透明度：1；
笔画宽度：4.50001；
笔划线头：圆形；
行程限制：7；
}
.hexagon1{fill:#ffb619；}
.hexagon2{fill:#008000；}
svg path.clicked{fill:#0000FF；}
svg path.unclicked{fill:#CC0000；}

两件事

在这两种情况下都有内联样式，因此内联样式中的所有属性都不会应用，因为内联样式具有更高的特定性


unclicked
和
clicked
具有相同的CSS

.clicked {
  fill: #0000FF;
}

.unclicked {
 fill: #0000FF;
}


要使其工作，请使用
！重要信息
在JQuery中，或者最初避免使用内联样式，并在CSS文件中应用样式。另外，在这两种情况下，您肯定需要使用不同的
填充
颜色。
单击
和
未单击
具有相同的颜色应用于
路径
的内联样式更为具体，因此将覆盖您在类中放置的任何内容（在检查元素时可以看到）。要么使用
！重要信息
在css类中，或者将类也用作基本样式。我想推荐后者谢谢你的帮助！它工作得很好。我犯了一个明显的错误。谢谢你的解释。我现在明白了。