работа с 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,
да |
рони,
не хочется злоупотреблять Вашим временем, но подскажите, идея данного меню заключается в том что при нажатии на категорию рядом с помощью AJAX появится список подкатегорий. могу ли я сделать так
.
.
.
if(el == item)
{
el.classList.add('testA');
function AddCategory()/*функция которая запустит AJAX*/
}
else
{
el.classList.remove('testA');
}
.
.
.
|
Цитата:
Цитата:
.
.
.
if(el == item)
{
el.classList.add('testA');
AddCategory(el)/*функция которая запустит AJAX*/
}
else
{
el.classList.remove('testA');
}
.
.
.
|
Спасибо большое
|
bgraf,
если строить дерево с AJAX, тогда лучше изучить делегирование, и поискать примеры. |
рони,
спасибо за рекомендацию, обязательно изучу. но в целом уже все сделал. создал объект XMLHttpRequest все подключил, на стороне сервера сделал выборку по id элемента подгрупп , создал список и вставил его через innerHTML в блок стоящий рядом. единственное у меня есть иконки для групп при наведении и после клика они должны поменяться на другой цвет. и тут что то заморочился, в css при hover не знаю как поменять их, все меню динамическое из mysql поэтому прямо прописать на каждую категорию не могу, хотя в базе есть поля img_on and img_off при создании кидаю сразу поле img_on. при клике еще понимаю как на js поменять src img а вот как отследить и поменять hover черт его знает. рони, еще раз спасибо за Ваши ответы научился новому, до этого бы писал топорно и увеличил бы код в разы, а с Вами обошлось несколькими строчками. Вам + большой и надеюсь в будущем смогу рассчитывать на этот форум и на профecсионалов как Вы!!!! |
bgraf,
без кода сложно что-либо подсказать. |
рони,
Спасибо большое за Ваш материал |
| Часовой пояс GMT +3, время: 22:24. |