работа с 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, время: 19:20. |