сделать div как радиокнопка

Question

Мне интересно, можно ли сделать div, который ведет себя точно так же, как переключатель? Я пытаюсь достичь этого без использования jquery, который многие люди предлагают, я проверил сеть и нашел ее.

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

function Switcher(a,b,c,d,e){ 
    document.getElementById('button1').style.background=a; 
    document.getElementById('button2').style.background=b; 
    document.getElementById('button3').style.background=c; 
    document.getElementById('button4').style.background=d; 
    document.getElementById('button5').style.background=e; 
} 

с событием OnClick

onClick="Switcher(#c5e043,#241009,#241009,#241009,#241009)" 

затем каждая кнопка нажата включена, я могу добавить на функция переключателя проверки, но я замечаю, что мне может потребоваться до 20, что делает список очень длинным.

Мне интересно, есть ли у кого-нибудь более простое решение этой проблемы? В основном мне нужен div, который ведет себя как переключатель, который изменяет bgcolor или smthg при выбранном (радио также)

Answer 1

Если вы хотите использовать div вместо переключателей, чтобы лучше контролировать внешний вид. Если вы можете использовать реальные кнопки радио, это то, что я предлагаю:

Используйте кнопки реального радио с этикеткой, как это:

<input type="radio" name="rGroup" value="1" id="r1" checked="checked" /> 
<label class="radio" for="r1"></label> 

Скрыть с помощью CSS ваших кнопок радио:

.radios input[type=radio]{ 
    display:none 
} 

И создайте этикетку так, как хотите. Я создал простой jsfiddle, который полностью демонстрирует, как использовать радиокнопки без внешнего вида. Вместо этого, это немного цветной квадрат, который изменился, когда он проверен.

Here является jsfiddle

Answer 2

Чтобы уменьшить решение javascript для обработки многих «кнопок», создайте класс. Класс должен иметь поле, содержащее массив div. Внутри класса также предусмотрена функция, такая как setDivState (isSelected). Внутри метода, обрабатывающего действие клика, которое должно быть нажато на div, выполните команду forEach на divs, определяющую состояние каждого div.

Answer 3

Избавьтесь от этого html onClick, используя встроенный javascript - это плохая практика. В вашем яваскрипте файла, который вы включаете на странице, добавьте эту функцию:

var checkboxes = document.querySelectorAll('.button'); 
for (var i = 0; i < checkboxes.length; i++) { 
    checkboxes[i].addEventListener('click', function() { 
     for (var j = 0; j < checkboxes.length; j++) { 
      checkboxes[j].style.background = '#241009'; 
     } 
     this.style.background = '#c5e043'; 
     return false; 
    }); 
} 

Что это делает, он получает все ваши кнопки (вы дали всем вашим кнопкам класс button или что-то подобного, не так ли?) и присваивает каждому из них событие click. Событие click проходит через все ваши кнопки и сбрасывает их до # 241009, а затем берет нажатой кнопку (this) и устанавливает ее на # c5e043.

Таким образом, вам не нужно создавать 20 различных функций onclick, и вы можете добавлять или удалять кнопки без изменения результата. Возможно, вы также захотите создать массив, который отслеживает, какая из 20 кнопок активна, или вы можете просто проверить, какой цвет активен (но лучше было бы создать массив).

Кроме того, и я знаю, что Stack Overflow ненавидит это, это именно то, что облегчается библиотекой javascript. Как только вы получите действительно хорошую ручку на чистом javascript, загляните в библиотеку, например, jQuery или другую, чтобы упростить этот процесс.