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以及span内部svg是否可见？

标签： javascripthtmlcsssvg

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>