Форум

bgraf · #1 (**permalink**) 21.07.2017, 14:06

Здравствуйте!
Помогите разобраться.
У меня есть список 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
Спасибо Вам всем за помощь

рони · #2 (**permalink**) 21.07.2017, 14:28

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>

bgraf · #3 (**permalink**) 21.07.2017, 16:19

рони, спасибо Вам большое за ответ.
Очень прошу объясните 14 и 17 строку и зачем нам надо добавлять item.addEventListener('click', function(event)
буду очень признателен если уделите еще чуточку своего времени.
Очень хочется не тупо скопировать а понять как это устроено. Все функции понимаю хочется понять принцип.
Спасибо

рони · #4 (**permalink**) 21.07.2017, 16:35

Сообщение от bgraf

14 и 17

достойная замена for
коллекции-не-массивы

bgraf · #5 (**permalink**) 21.07.2017, 16:49

а зачем надо два, ведь уже есть массив и я по нему бегу? и зачем надо элементу присваивать click?

рони · #6 (**permalink**) 21.07.2017, 16:55

bgraf,
первый назначает клик, второй проверка которая будет после клика.

Сообщение от bgraf

зачем надо элементу присваивать click?

а как он должен реагировать на клик, если не ставить обработку клика?

можно, конечно, поставить обработку клика, только на ul class="menu_servicesCategory" и проверять на что нажали в этом элементе
Делегирование событий

bgraf · #7 (**permalink**) 21.07.2017, 17:57

рони, скажите а почему при таком раскладе 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
ну чтобы не повторять так как по сути при наведении и при клике я присваиваю одно и тоже
Безмерно Вам благодарен, спасибо

рони · #8 (**permalink**) 21.07.2017, 18:07

Сообщение от bgraf

background не меняется

селекторы имеют вес

<!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>

bgraf · #9 (**permalink**) 21.07.2017, 18:21

т.е. в любом случае нужен класс testA который мы прикрутим к элементу?

рони · #10 (**permalink**) 21.07.2017, 18:31

bgraf,
да

Форум

Справочник

Discord чат

Курсы javascript