Создавайте многоразовые ключи с помощью JavaScript и CSS - PullRequest
Новая
       20

Создавайте многоразовые ключи с помощью JavaScript и CSS

0 голосов
/ 16 января 2019

В настоящее время я разрабатываю веб-интерфейс, который имеет несколько пользовательских элементов управления, одним из которых является тумблер. Это грубый пример того, как я должен выглядеть:

Интерфейс enter image description here

Я сделал этот переключатель в Illustrator и экспортировал его в формате .svg, в результате чего получился прямоугольник (основание) и круг (скользящая часть). Когда нажимается тумблер, я хочу, чтобы база меняла цвета, переменную, которую нужно установить или сбрасывать, и ползунок для перемещения на 16 пикселей вправо. Я знаю, как я мог бы сделать это, изменяя свойство стиля каждого отдельного элемента, но я хотел бы знать, как (если) это можно сделать с одним глобальным идентификатором для всего переключателя. Я использую CSS и JavaScript и хотел бы придерживаться этих языков.

Короче говоря, это то, чего я хочу достичь: я хочу использовать один идентификатор для ссылки в javascript и хотел бы переключать переменную (и стили) переключателем. Таким образом, если я использую 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
}

Любая помощь в решении этой проблемы будет принята с благодарностью, спасибо!

...