Javascript 如何在悬停和单击时切换元素的样式？

我有4个SVG圆圈，我想在悬停和单击时切换它们的样式。我一次只希望单击一个圆时具有该样式，即单击另一个圆时从一个圆中删除该样式。 悬停使用CSS工作，但我的JavaScript不太正确

当单击另一个圆时，它将从一个圆中删除样式，但不允许从活动目标圆切换样式类。另外，如果单击SVG圆圈之外的任何内容，如何从圆圈中删除样式

var circles=document.querySelectorAll（'.svgcircle'））
圆圈=数组.prototype.slice.call（圆圈）；
对于（i=0；i

html，
身体{
身高：100%；
宽度：100%；
溢出：隐藏；
}
svg{
位置：绝对位置；
最高：35%；
左：50%；
左边距：-200px；
填充：10px；
}
svg圆{
填充物：#B5EF8A；
光标：指针；
行程：56CBF9；
笔画宽度：2px；
}
svg圆圈：悬停{
填充：#fff；
行程：56CBF9；
}
.圆形目标{
填充：#fff；
行程：56CBF9；
}

---

这将按照您的预期执行：

let circles=Array.from（document.querySelectorAll（'.svgcircle'）；
圆。forEach（圆=>{
circle.addEventListener（“单击”，（{target}）=>{
circles.forEach（c=>target！==c&&c.classList.remove（“circleTarget”）；
target.classList.toggle（“circleTarget”）；
})
});
//如果单击了其他任何内容，请删除类
document.body.addEventListener（'click'，（{target}）=>
！Array.from（target.classList）.includes（'svgcircle'））
&&circles.forEach（c=>c.classList.remove（“circleTarget”）
html，
身体{
身高：100%；
宽度：100%；
溢出：隐藏；
}
svg{
位置：绝对位置；
最高：35%；
左：50%；
左边距：-200px；
填充：10px；
}
svg圆{
填充物：#B5EF8A；
光标：指针；
行程：56CBF9；
笔画宽度：2px；
}
svg圆圈：悬停{
填充：#fff；
行程：56CBF9；
}
.圆形目标{
填充：#fff；
行程：56CBF9；
}
您的代码正在清除所有圆圈上的类的使用，然后在单击的圆圈上切换该类，但这将始终导致单击的圆圈变为活动状态（因为您刚刚清除了所有的类）您需要检查被单击的圆圈是否已处于活动状态，并据此采取行动。

通过使用事件委派，您可以使代码更简单。您不必在每个圆圈上设置事件处理程序，并且可以轻松检查圆圈上没有的单击。这就是所谓的

另外，由于要将圆转换为数组，请使用
Array.forEach（）
方法循环，这比管理循环索引简单得多

见内联评论：


var circles=Array.prototype.slice.call（document.querySelectorAll（'.svgcircle'）；
//在文档上设置事件侦听器会导致两败俱伤
//一石二鸟。它消除了设置单击事件处理程序的需要
//在每个圆圈上，它可以方便地检查您是否
//单击除圆以外的任何对象。
文档.添加的EventListener（“单击”，函数（evt）{
//检查单击的元素是否为圆之一：
if（evt.target.classList.contains（“svgcircle”））{
//它是，因此捕获单击的圆圈是否已处于活动状态
让active=evt.target.classList.contains（“circleTarget”）；
removeClass（）；//重置所有圆上的类用法
//如果单击的圆圈处于活动状态，请将其停用。
//否则，请激活它：
如果（活动）{
evt.target.classList.remove（“circleTarget”）；
}否则{
evt.target.classList.add（“circleTarget”）；
}  
}否则{
//它不是那么清晰，所有的圈子里的所有样式
removeClass（）；
}
});
函数removeClass（）{
//在所有圆上循环并移除目标类
圆。forEach（函数（cir）{
cir.classList.remove（“circleTarget”）；
});
}
html，
身体{
身高：100%；
宽度：100%；
溢出：隐藏；
}
svg{
位置：绝对位置；
最高：35%；
左：50%；
左边距：-200px；
填充：10px；
}
svg圆{
填充物：#B5EF8A；
光标：指针；
行程：56CBF9；
笔画宽度：2px；
}
svg圆圈：悬停{
填充：#fff；
行程：56CBF9；
}
.圆形目标{
填充：#fff；
行程：56CBF9；
}
；说得对，我已经更新了我的答案
.forEach（）
是我的初衷，当时我一定是忘了