使用JavaScript为所有未单击的圆更改SVG圆的CSS属性

我现在包含一个列表，其中包含多个

li

，每个

li

都包含一个

circle

我想要一种有效而非硬编码的方法，一种将未单击的每个circle的类更改为

禁用的
，一种将单击的circle更改为
活动的

我如何通过循环而不是通过编程硬编码来高效地使用JS实现这一点

<ul>
   <li>
     <svg>
         <circle ...> </circle>
         <span> Text </span>
     </svg>

   </li>
    --> repeated several more times
</ul>




正文

-->又重复了几次


如果我点击一个圆圈，我如何有效地将被点击的圆圈的类别更改为“活动”
，将所有未点击的圆圈更改为“禁用”
，并将
svg
中的
span
更改为可见或不可见？
可能您不需要设置“禁用”（如下面的sippet）


let circles=[…document.querySelectorAll（'circle'）；
circles.forEach（c=>c.onclick=e=>{
circles.forEach（cc=>cc.classList.remove（'active'）；
e、 target.classList.add（'active'）；
});
svg{高度：50px；宽度：50px；}
.中国保监会{
笔画：黑色；
笔画宽度：3；
填充物：灰色；
光标：指针；
}
.active{fill:red；}


正文


正文


正文

您需要使用
text
在SVG中包含文本。请尝试下面的代码


let circles=document.querySelectorAll（'g'）；
圆。forEach（g=>{
设text=g.querySelector（'text'）；
text.classList.add（'hide'）；
设circle=g.querySelector（'circle'）；
circle.classList.add（'disabled'）；
circle.onclick=函数（e）{
this.classList.remove（'disabled'）；
this.classList.add（'active'）；
text.classList.remove（'hide'）；
}
})
.active{
填充：绿色；
}
.残疾人{
填充物：灰色；
}
李{
列表样式：无；
}
.隐藏{
显示：无；
}


圈1


圈2

使用Jquery
首先给每个圆圈一个这样的id

     <li>
         <svg>
             <circle id="Circle1"> </circle>
            <span> Text </span>
         </svg>

     </li>
    <li>
        <svg>
            <circle id="Circle2"> </circle>
            <span> Text </span>
        </svg>

    </li>
    <li>
        <svg>
            <circle id="Circle3"> </circle>
            <span> Text </span>
        </svg>

    </li>


正文


正文


正文


单击任何“添加活动类”

    for(i=0;i<3;i++){
        $("#Circle"+i).click(function(){
            $(this).addClass("active");
        });
    }

for（i=0；i您可以使用纯Javascript（就像前面的其他答案一样）或者您可以使用jQuery。在我看来，切换类更容易

$("svg").on("click", function () {
        // reset all svg classes:
        $("svg").addClass("disabled").removeClass("active");
        // set for the clicked svg:
        $(this).removeClass("disabled").addClass("active");
    });

请参阅：
您是否使用纯JS或类似jQuery的库？svg元素中有一个span元素。您不能这样做，在svg元素中，您必须使用
text
元素text@MRonline如果需要，我可以添加库，比如jQueryHow，如果没有单击它，它可以被修改为向类添加disabled吗？我想这是rks.->let circles=[…document.queryselectoral（'circle'）]；circles.forEach（c=>c.onclick=e=>{circles.forEach（函数（circle）{circle.classList.remove（'active'）；circle.classList.add（'disabled'）；}）；e.target.classList.add（'active'）；e.target.classList.remove（'disabled'）；}）；很有趣，但我对每个svg都有一个
，这仍然有效吗？我采用了上面的代码，因为它更容易理解imo，但是它确实缺少文本组件。是的，因为我们使用
querySelectorAll
，所以
li
的数量并不重要。
   function Check(){
        for(i=0;i<3;i++){
          if(!$("#Circle"+i).hasClass("active")){
            $(this).addClass("disabled");
          }
        }
    }

$("svg").on("click", function () {
        // reset all svg classes:
        $("svg").addClass("disabled").removeClass("active");
        // set for the clicked svg:
        $(this).removeClass("disabled").addClass("active");
    });