работа с querySelectorAll
Здравствуйте!
Помогите разобраться. У меня есть список ul При клике на одном из его элементов мне надо прицепить к нему класс document.addEventListener('DOMContentLoaded', function() { /*получаю массив элементов*/ var menuServicesCategory = document.querySelectorAll(".menu_servicesCategory li a"); /*тут нужна помощь, хочу вызвать функцию при клике на элемент*/ menuServicesCategory.click = function() { /*бегу по всем элементам*/ for(var i=0;i<menuServicesCategory.length;i++) { /*присваиваю всем класс*/ menuServicesCategory[i].classList.add(".menu_servicesCategoryHover"); /*как сделать тут проверку на какой элемент именно нажали чтобы ему присвоить другой класс*/ } } } Так как написано не работает, поправьте меня как правильно надо сделать. Идея в том что я хочу полусить массив из элементов пробежать по нему присвоить всем класс 1 кроме того элемента на который нажали ему присвоить класс2 Спасибо Вам всем за помощь |
bgraf,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .act { background-color: #FF1493; margin: 8px; } </style> <script> window.addEventListener('DOMContentLoaded', function() { var menuServicesCategory = document.querySelectorAll(".menu_servicesCategory li a"); [].forEach.call(menuServicesCategory, function(item) { item.addEventListener('click', function(event) { event.preventDefault(); [].forEach.call( menuServicesCategory, function(el) { el == item ? el.classList.add('act'): el.classList.remove('act'); }); }); }); }); </script> </head> <body> <ul class="menu_servicesCategory"> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li><a href="">6</a></li> <li><a href="">7</a></li> <li><a href="">8</a></li> </ul> </body> </html> |
рони, спасибо Вам большое за ответ.
Очень прошу объясните 14 и 17 строку и зачем нам надо добавлять item.addEventListener('click', function(event) буду очень признателен если уделите еще чуточку своего времени. Очень хочется не тупо скопировать а понять как это устроено. Все функции понимаю хочется понять принцип. Спасибо |
|
а зачем надо два, ведь уже есть массив и я по нему бегу? и зачем надо элементу присваивать click?
|
bgraf,
первый назначает клик, второй проверка которая будет после клика. Цитата:
можно, конечно, поставить обработку клика, только на ul class="menu_servicesCategory" и проверять на что нажали в этом элементе Делегирование событий |
рони, скажите а почему при таком раскладе background не меняется
первоначально элементу присваивается такой класс .menu_servicesCategory a{ display:block; cursor:pointer; background-color:#f6f6fa; height: 45px; border-bottom: 1px solid #e7e7ed; transition: 0.5s background box-shadow; } а при клике такоц .testA{ background-color:#ffffff; box-shadow: 0px 0px 45px -7px #e1e1e1; border-radius: 5px; border-bottom: 0; } и еще будьте добры объясните если у меня есть класс .menu_servicesCategory a:hover{ background:#ffffff; box-shadow: 0px 0px 45px -7px #e1e1e1; border-radius: 5px; border-bottom: 0; } то можно как то обойтись без дополнительного класса типа testA а использовать класс при наведении menu_servicesCategory a:hover ну чтобы не повторять так как по сути при наведении и при клике я присваиваю одно и тоже Безмерно Вам благодарен, спасибо |
Цитата:
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .menu_servicesCategory a{ display:block; cursor:pointer; background-color:#f6f6fa; height: 45px; border-bottom: 1px solid #e7e7ed; transition: 0.5s background box-shadow; } .menu_servicesCategory a.testA, .menu_servicesCategory a:hover{ background-color:#ffffff; box-shadow: 0px 0px 45px -7px #e1e1e1; border-radius: 5px; border-bottom: 0; } </style> <script> window.addEventListener('DOMContentLoaded', function() { var menuServicesCategory = document.querySelectorAll(".menu_servicesCategory li a"); [].forEach.call(menuServicesCategory, function(item) { item.addEventListener('click', function(event) { event.preventDefault(); [].forEach.call( menuServicesCategory, function(el) { el == item ? el.classList.add('testA'): el.classList.remove('testA'); }); }); }); }); </script> </head> <body> <ul class="menu_servicesCategory"> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li><a href="">6</a></li> <li><a href="">7</a></li> <li><a href="">8</a></li> </ul> </body> </html> |
т.е. в любом случае нужен класс testA который мы прикрутим к элементу?
|
bgraf,
да |
Часовой пояс GMT +3, время: 02:48. |