使用JavaScript和CSS创建可重复使用的开关

Question

我目前正在开发一个具有一些自定义控件的Web界面，其中之一是拨动开关。这是我看起来像的一个粗略示例：

界面

我已在Illustrator中进行了此切换，并将其导出为.svg，这将导致rect（底部）和圆（滑动部分）。单击切换开关时，我希望底座更改颜色，要设置或重置的变量以及希望向右移动16px的滑块。我知道如何通过更改每个不同元素的style属性来做到这一点，但我想知道（如果）如何使用整个开关的一个全局ID来完成此操作。我正在使用CSS和javascript，并希望坚持使用这些语言。

简而言之，这就是我想要实现的目标：我想在JavaScript中使用一个ID作为参考，并希望通过开关来切换变量（和样式）。这样，如果我使用5个开关，则每个开关都可以独立切换。

这是我已经拥有的：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="36px" height="18px" class="Switch" id="Switch1" checked="false">
<defs>
    <linearGradient id="SwitchGradient" x1="0%" y1="0%" x2="0%" y2="100%"> //gradient for slider
        <stop offset="5%" stop-color="#E6EEF2" />
        <stop offset="95%" stop-color="#D7DDE0" />
    </linearGradient>
</defs>
<rect x="3.25" y="3.25" width="27" height="11" class="BaseSlider" rx="6px" ry="6px" id="SwitchBase1"/> //base of the switch
<circle cx="9" cy="9" r="8.5" class="SwitchSlider" id="SwitchSlider1"/> //slider of the switch

这是我的javascript函数：

function SwitchClick() {
Slider_Clicked = !Slider_Clicked; // toggle boolean
if (Slider_Clicked) {
    SwitchBase.style.fill = "#3EBEE5"; //make blue
    SwitchSlider.style = "transform: translateX(16px)"; //move to right
} else {
    SwitchBase.style.fill = "#D7DDE0"; // make grey
    SwitchSlider.style = "transform: translateX(0px)"; //move to left
}

非常感谢您提供有关如何解决此问题的帮助！