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

Question

我现在包含一个包含多个 li 的列表，每个 li 包含一个 circle 我想要一种有效而不是硬编码的方法方法将未单击的每个圈子的类更改为禁用，并将单击的圈子的类更改为事件。

如何使用 JS 通过循环而不是硬编码来高效地执行此操作？

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

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

如果我单击一个圆圈，如何有效地将被单击的圆圈的类更改为事件，并将所有未单击的圆圈更改为禁用以及svg 内的 span 是否可见？

Answer 1

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

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>