如何用jQuery实现SVG第二次点击切换填充色（重置默认效果）

嘿，我看你已经搞定了第一次点击给SVG添加红色填充的功能，现在要实现第二次点击重置默认颜色对吧？我帮你优化下代码，让逻辑更健壮可靠：

优化后的直接修改样式方案 #

jQuery('#color-my-svg').on("click", function() {
  const $svg = jQuery(this);
  // 直接检查当前填充色是否为我们设置的红色
  if ($svg.css('fill') !== '#ff0000') {
    $svg.css({ fill: "#ff0000" });
  } else {
    // 移除内联style属性，恢复SVG的默认填充色
    $svg.removeAttr('style');
  }
});

为什么要调整原来的逻辑？ #

• 你原来的判断是检查元素有没有style属性，但如果SVG本身默认就带有内联style（比如默认填充色是写在元素上的），那这个判断就会失效。直接检查fill的实际值，逻辑更准确。
• 把jQuery(this)缓存到变量$svg里，避免多次重复查询DOM，小细节提升性能。

更推荐的类名切换方案（样式与逻辑分离） #

如果你的SVG默认填充色是通过CSS类定义的，用类名来切换会更易维护，后续改颜色或者加其他效果都不用动JS：

/* 默认样式 */
#color-my-svg {
  fill: #你的默认颜色值;
}

/* 点击激活后的样式 */
#color-my-svg.active {
  fill: #ff0000;
}

jQuery('#color-my-svg').on("click", function() {
  jQuery(this).toggleClass('active');
});

这种方式遵循了关注点分离的原则，样式归CSS管，交互逻辑归JS管，代码可读性和扩展性都更好。

内容的提问来源于stack exchange，提问作者shokis