Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.03.2015, 15:33
Интересующийся
Отправить личное сообщение для NO_ONE Посмотреть профиль Найти все сообщения от NO_ONE
 
Регистрация: 01.03.2014
Сообщений: 19

Эмуляция input radio
Привет.

Есть на странице N кликабельных элементов. При клике на такой элемент, на него вешается класс selected:

var box = document.getElementById("box-div"); // блок, где ищем элементы
  var divs = box.querySelectorAll(".clickable-div"); // сами кликабельные элементы
  var i;
  for (var i=0; i<divs .length; i++ ) {
   var alldivs = divs[i];
   alldivs.addEventListener("click",function(){ // вешаем клик на элементы
	 toggleClass(this,"selected"); // отдельная рабочая функция toggle, ставящая и убирающая класс при клике
	});
 }


А как сделать так, чтобы при клике на другой элемент .clickable-div снимался класс с уже выбранного (и, соответственно, вешался на вновь выбранный)? По сути эмулировать input radio...
Ответить с цитированием
  #2 (permalink)  
Старый 14.03.2015, 16:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

NO_ONE,
var box = document.getElementById("box-div"); // блок, где ищем элементы
  var divs = box.querySelectorAll(".clickable-div"); // сами кликабельные элементы
  var i;
  var temp;
  for (var i=0; i<divs .length; i++ ) {
   var alldivs = divs[i];
   alldivs.addEventListener("click",function(){ // вешаем клик на элементы
	 toggleClass(this,"selected"); // отдельная рабочая функция toggle, ставящая и убирающая класс при клике
     temp && temp != this && removeClass(temp,"selected");
     temp = this;
   });
 }
Ответить с цитированием
  #3 (permalink)  
Старый 14.03.2015, 16:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

NO_ONE,
var box = document.getElementById("box-div"); // блок, где ищем элементы
  var divs = box.querySelectorAll(".clickable-div"); // сами кликабельные элементы
  var i;
  for (var i=0; i<divs .length; i++ ) {
   var alldivs = divs[i];
   alldivs.addEventListener("click",function(){ // вешаем клик на элементы
     var temp = box.querySelector('.selected')
     temp && temp != this && removeClass(temp,"selected");
     toggleClass(this,"selected"); // отдельная рабочая функция toggle, ставящая и убирающая класс при клике
   });
 }
Ответить с цитированием
  #4 (permalink)  
Старый 14.03.2015, 17:36
Интересующийся
Отправить личное сообщение для NO_ONE Посмотреть профиль Найти все сообщения от NO_ONE
 
Регистрация: 01.03.2014
Сообщений: 19

Спасибо, рони!

P.S removeClass'а у меня не было, пришлось на temp.classList.remove("selected") заменить.

P.P.S На live-co тебя давно не видать. )
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
input radio и input text tart Элементы интерфейса 4 26.01.2015 19:14
Событие на input radio redwert Элементы интерфейса 3 23.09.2014 09:45
Такое возможно? При выборе radio надо чтобы менялось значение в input Stas111111 Общие вопросы Javascript 11 23.05.2014 00:41
input radio при выборе передавать значения в скрипт portalamur AJAX и COMET 16 19.09.2013 22:14
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27