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

Question

我现在包含一个包含几个 li 的列表，每个 li 包含一个 circle 我想要一种有效而不是硬编码的方法将未点击的每个圈子的类更改为 disabled 并将被点击的圈子的类更改为 active 的方法。

我怎样才能通过循环而不是硬编码使用 JS 以编程方式高效地执行此操作？

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

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

如果我点击一个圆圈，我如何有效地将被点击的圆圈的类更改为 active 并将所有未单击的圆圈更改为 disabled 以及svg 中的 span 是否可见？

Answer 1

可能您不需要设置“已禁用”(如下面的 sippet 所示)。

let circles = [...document.querySelectorAll('circle')];

circles.forEach(c => c.onclick = e=> {
  circles.forEach(cc=> cc.classList.remove('active'));
  e.target.classList.add('active');
});

let circles = [...document.querySelectorAll('circle')];

circles.forEach(c => c.onclick = e=> {
  circles.forEach(cc=> cc.classList.remove('active'));
  e.target.classList.add('active');
});

svg { height: 50px; width: 50px; }
.circ {
  stroke: black;
  stroke-width: 3;
  fill: gray;
  cursor: pointer;
}

.active { fill: red; }

<ul>
   <li>
     <svg>
         <circle cx="25" cy="25" r="20" class="circ active"  />       
         <span> Text </span>
     </svg>
   </li>
   
   <li>
     <svg>
         <circle cx="25" cy="25" r="20" class="circ"  />       
         <span> Text </span>
     </svg>
   </li>
   
   <li>
     <svg>
         <circle cx="25" cy="25" r="20" class="circ"  />       
         <span> Text </span>
     </svg>
   </li>
</ul>