无法使用jQuery toggle实现点击SVG切换颜色的问题

问题根因 #

• 你当前的代码仅实现了单次点击将元素color属性设置为蓝色的逻辑，没有加入状态判断，自然无法实现交替切换的效果。
• 如果你尝试调用的是jQuery早期版本的.toggle(handler1, handler2)重载方法，注意jQuery 1.9及以上版本已经移除了该用法，现在调用.toggle()只会切换元素的显示/隐藏状态，和你要的颜色切换效果完全不符。
• 额外注意：如果你的SVG元素的填充属性没有设置为currentColor，直接修改CSS的color属性不会生效，需要直接修改fill属性。

最优解决方案：用类切换实现toggle效果 #

该方案逻辑简洁，同时遵循样式与逻辑分离的开发规范：

1. 先定义切换后的样式类：

/* 如果是用currentColor控制SVG颜色就用这个 */
.one.active {
  color: blue;
}
/* 如果直接控制SVG填充就用这个，二选一即可
.one.active {
  fill: blue;
}
*/

2. 替换你的原有JS逻辑：

$(".one").click(function() {
  $(this).toggleClass('active');
});

备选方案：直接判断颜色值切换 #

如果不想新增样式类，也可以直接判断当前颜色值做切换，注意浏览器返回的颜色值为rgb()格式，判断条件要对应：

$(".one").click(function() {
  // 切换color属性的写法
  const nowColor = $(this).css('color');
  $(this).css('color', nowColor === 'rgb(0, 0, 255)' ? 'black' : 'blue');

  // 切换fill属性的写法，二选一即可
  // const nowFill = $(this).css('fill');
  // $(this).css('fill', nowFill === 'rgb(0, 0, 255)' ? 'black' : 'blue');
});

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