Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.07.2017, 14:06
Аспирант
Отправить личное сообщение для bgraf Посмотреть профиль Найти все сообщения от bgraf
 
Регистрация: 16.04.2013
Сообщений: 35

работа с 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
Спасибо Вам всем за помощь
Ответить с цитированием
  #2 (permalink)  
Старый 21.07.2017, 14:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #3 (permalink)  
Старый 21.07.2017, 16:19
Аспирант
Отправить личное сообщение для bgraf Посмотреть профиль Найти все сообщения от bgraf
 
Регистрация: 16.04.2013
Сообщений: 35

рони, спасибо Вам большое за ответ.
Очень прошу объясните 14 и 17 строку и зачем нам надо добавлять item.addEventListener('click', function(event)
буду очень признателен если уделите еще чуточку своего времени.
Очень хочется не тупо скопировать а понять как это устроено. Все функции понимаю хочется понять принцип.
Спасибо
Ответить с цитированием
  #4 (permalink)  
Старый 21.07.2017, 16:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от bgraf
14 и 17
достойная замена for
коллекции-не-массивы
Ответить с цитированием
  #5 (permalink)  
Старый 21.07.2017, 16:49
Аспирант
Отправить личное сообщение для bgraf Посмотреть профиль Найти все сообщения от bgraf
 
Регистрация: 16.04.2013
Сообщений: 35

а зачем надо два, ведь уже есть массив и я по нему бегу? и зачем надо элементу присваивать click?
Ответить с цитированием
  #6 (permalink)  
Старый 21.07.2017, 16:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

bgraf,
первый назначает клик, второй проверка которая будет после клика.
Сообщение от bgraf
зачем надо элементу присваивать click?
а как он должен реагировать на клик, если не ставить обработку клика?

можно, конечно, поставить обработку клика, только на ul class="menu_servicesCategory" и проверять на что нажали в этом элементе
Делегирование событий
Ответить с цитированием
  #7 (permalink)  
Старый 21.07.2017, 17:57
Аспирант
Отправить личное сообщение для bgraf Посмотреть профиль Найти все сообщения от bgraf
 
Регистрация: 16.04.2013
Сообщений: 35

рони, скажите а почему при таком раскладе 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от 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>
Ответить с цитированием
  #9 (permalink)  
Старый 21.07.2017, 18:21
Аспирант
Отправить личное сообщение для bgraf Посмотреть профиль Найти все сообщения от bgraf
 
Регистрация: 16.04.2013
Сообщений: 35

т.е. в любом случае нужен класс testA который мы прикрутим к элементу?
Ответить с цитированием
  #10 (permalink)  
Старый 21.07.2017, 18:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

bgraf,
да
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Дизайнер, верстальщик со знанием Adobe Flash и Adobe Photoshop, УДАЛЕННАЯ РАБОТА Анна NikitaOnline Работа 0 21.03.2016 18:57
Вакансия: Программист IOS, работа в офисе,г.Ростов-на-Дону Анна NikitaOnline Работа 0 21.03.2016 18:45
Постоянная работа / Front-end / Москва kooper Работа 4 29.09.2011 22:06