使用 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>

Answer 2

您需要使用text在 SVG 中包含文本。 試試下面的代碼。

 let circles = document.querySelectorAll('g'); circles.forEach(g => { let text = g.querySelector('text'); text.classList.add('hide'); let circle = g.querySelector('circle'); circle.classList.add('disabled'); circle.onclick = function(e) { this.classList.remove('disabled'); this.classList.add('active'); text.classList.remove('hide'); } })

 .active { fill: green; } .disabled { fill: grey; } li { list-style: none; } .hide { display: none; }

 <ul> <li> <svg height="100" width="100"> <g> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> <text x="25" y="100" fill="red">Circle 1</text> </g> </svg> </li> <li> <svg height="100" width="100"> <g> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> <text x="25" y="100" fill="red">Circle 2</text> </g> </svg> </li> </ul>

Answer 3

使用 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>

單擊任何添加類 Active

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

檢查是否找到類並在未找到時添加禁用類的功能

   function Check(){
        for(i=0;i<3;i++){
          if(!$("#Circle"+i).hasClass("active")){
            $(this).addClass("disabled");
          }
        }
    }

Answer 4

您可以使用普通的 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");
    });

參見： jQuery .on() jQuery .addClass()