Эмуляция 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... |
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; }); } |
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, ставящая и убирающая класс при клике }); } |
Спасибо, рони!
P.S removeClass'а у меня не было, пришлось на temp.classList.remove("selected") заменить. P.P.S На live-co тебя давно не видать. ) |
Часовой пояс GMT +3, время: 14:58. |