29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 326
1

Добавить/Удалить класс элементу с заданным классом по клику (без jQuery)

15.01.2016, 14:03. Показов 22622. Ответов 12
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Добавить/Удалить класс элементу с заданным классом по клику!
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<meta charset='utf-8'>
<title>ПРИМЕР</title>
<div class='el'>Element 1</div>
<div class='el'>Element 2</div>
<style>
  .el {
    background: #eef;
  }
  .red {
    color: #f00;
  }
</style>
<script>
  var el = document.querySelectorAll('.el');
  el.onclick = function() {
    this.classList.toggle('red');
  }
</script>
Пробовал и так:
Javascript
1
2
3
4
  var el = document.getElementsByClassName('el');
  el.addEventListener('click', function() {
    this.classList.toggle('red');
  })
Не помогло (

Объясните, пожалуйста, почему не работает пример, если:
1) Код скрипта синтаксически правильный;
2) Он находится в конце документа, следовательно DOM будет уже загружен.

Причем, если использовать:
var el = document.querySelector('.el');
пример работает и, как положено, в случае с querySelector, находит первый элемент с классом .el и добавляет к нему класс .red
А мне нужно, чтобы цвет шрифта менялся на том элементе с классом .el, по которому я кликну!

Плюс, если не трудно, подскажите как можно максимально сократить скрипт, не используя при этом jQuery и тп.
Спасибо!
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
15.01.2016, 14:03
Ответы с готовыми решениями:

Добавить класс динамично добавленному элементу, без нажатия, фокуса, наведения
Здравствуйте! Как это реализовать (см. заголовок)? Есть такие реализации:...

Присвоить класс элементу, который содержит в себе элемент с определенным классом (AJAX выдача)
Доброго времени! Есть выдача по AJAX-запросу - сетка блоков. Нужно подсветить блок, в котором...

Как добавлять класс _isactive через jQuery при 4 элементах с одинаковым классом
есть 4 кнопки &lt;div class=&quot;btn&quot;&gt;button 1&lt;/div&gt; &lt;div class=&quot;btn&quot;&gt;button 2&lt;/div&gt; &lt;div...

Добавить класс по клику
Подскажите пож - есть блок картинок с одним class , как сделать чтоб при клике по картинке ей...

12
123 / 62 / 32
Регистрация: 10.01.2014
Сообщений: 241
15.01.2016, 14:23 2
Цитата Сообщение от Teamur Посмотреть сообщение
getElementsByClassName querySelectorAll
у вас в обоих случаях условно массив ( точнее в первом живая коллекция а во втором объект HTMLCollection) и у них нет метода addEventListener, пробегитесь по коллекции циклом и навешайте клик на елементы

Добавлено через 7 минут
Javascript
1
2
3
4
5
6
7
8
9
10
11
  var elCollection = document.getElementsByClassName('el');
  console.dir(elCollection);
  var elNodes = document.querySelectorAll(".el");
  console.dir(elNodes);
  for(var i = 0; i < elCollection.length; i++) {
    var elem = elCollection[i];
    console.log(elem);
    elem.addEventListener("click", function(){
        this.classList.toggle("red");
    })
  }
0
29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 326
15.01.2016, 14:24  [ТС] 3
scio me nescire,
Пробегитесь по коллекции циклом и навешайте клик на элементы

Этого я, честно говоря, не ожидал. Думал, что задача наипростейшая.
С циклами я еще пока не работал. Начинающий )

В связи с этим у меня 2 вопроса:
1) Можно ли обойтись БЕЗ циклов?
2) Как это сделать с циклом?
0
123 / 62 / 32
Регистрация: 10.01.2014
Сообщений: 241
15.01.2016, 14:34 4
Лучший ответ Сообщение было отмечено Teamur как решение

Решение

по поводу сократить

Javascript
1
2
3
4
5
   for(var i = 0; i < document.getElementsByClassName('el').length; i++) {
    document.getElementsByClassName('el')[i].addEventListener("click", function(){
        this.classList.toggle("red");
    })
  }
Добавлено через 8 минут
Teamur,

Не по теме:

она и есть наипростейшая


вот без цикла
Javascript
1
2
3
4
document.body.addEventListener("click", function(e){
    var elem = e.target
    if(elem.classList.contains("el")) elem.classList.toggle("red");
})
1
29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 326
15.01.2016, 14:38  [ТС] 5
scio me nescire, Спасибо!
А что бы вы выбрали из предложенного вами?
Что быстрее работает?
Может быть есть еще какие варианты?
0
123 / 62 / 32
Регистрация: 10.01.2014
Сообщений: 241
15.01.2016, 14:42 6
Teamur, первый вариант наиболее очевидный, плюс не будет никаких проверок если кликнуть на другом теге, так что цикл лучше
0
29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 326
15.01.2016, 14:54  [ТС] 7
А проверка требует времени. То есть клик на любом элементе страницы будет включать проверку его скриптом на наличие указанного в нем класса?

addEventListener нужно обязательно добавлять в данном примере, верно?
0
123 / 62 / 32
Регистрация: 10.01.2014
Сообщений: 241
15.01.2016, 15:02 8
Цитата Сообщение от Teamur Посмотреть сообщение
То есть клик на любом элементе страницы будет включать проверку его скриптом на наличие указанного в нем класса?
все верно, плюс такого подхода, что если у вас появятся еще елементы которыми нужно так же управлять, просто дописываете к ним класc el
в случае же с циклом такого не будет, цикл прошелся развешал обработчики и если после его прохода вы динамически добавите еще один <div class="el"></div> на нем уже такого обработчика не будет
вот: http://frontender.info/an-intr... hiksobtiya

Цитата Сообщение от Teamur Посмотреть сообщение
addEventListener нужно обязательно добавлять в данном примере, верно?
можно еще так
Javascript
1
2
3
elem.click = function (){
    // код
};
1
29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 326
15.01.2016, 15:08  [ТС] 9
А вот используя селектор для id, содержащего 'el'
можно организовать? То есть без классов, но с проверкой на наличие фрагмента из id (el в примере ниже)?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<meta charset='utf-8'>
<title>ПРИМЕР</title>
<div id='el_1'>Element 1</div>
<div id='el_2'>Element 2</div>
 
<script>
var el = document.querySelector('div[id*='el']');
el.onclick = function() {
  this.classList.toggle('red');
}
</script>
Это я так гипотетически.. )))
0
123 / 62 / 32
Регистрация: 10.01.2014
Сообщений: 241
15.01.2016, 15:20 10
Teamur, методы onclick, addEventListener есть только у html елемента, а в el у вас лежит HTMLCollection
Javascript
1
var el = [<div id='el_1'>Element 1</div>, <div id='el_2'>Element 2</div>]
, то есть фактически вы сейчас написали что то типа:

Javascript
1
2
3
[<div id='el_1'>Element 1</div>, <div id='el_2'>Element 2</div>].onclick = function() {
  this.classList.toggle('red');
}
1
29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 326
15.01.2016, 15:29  [ТС] 11
Другими словами, методы onclick и addEventListener могут работать только с одним элементом?
А если надо, чтобы с несколькими, нужно повесить обработчики на все интересующие элементы, пробежавшись по ним циклом!
0
123 / 62 / 32
Регистрация: 10.01.2014
Сообщений: 241
15.01.2016, 15:30 12
Teamur, да
0
29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 326
15.01.2016, 15:38  [ТС] 13
Наверное другие товарищи вряд ли смогут предложить что-то еще. Всё, вроде, разжевали, как вы думаете, scio me nescire?
0
15.01.2016, 15:38
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
15.01.2016, 15:38
Помогаю со студенческими работами здесь

Добавить класс в зависимости от значения элементов с одинаковым классом
&lt;table&gt; &lt;tr&gt; &lt;td class=&quot;image&quot;&gt;&lt;/td&gt; &lt;td class=&quot;animal&quot;&gt;Петух&lt;/td&gt; &lt;td...

Добавить класс элементу
Привет! помогите пожалуйста разобраться, необходимо добавить класс блоку div (при нажатии на...

Добавить класс к элементу
Есть HTML: &lt;ul class=&quot;nav&quot;&gt; &lt;li&gt;&lt;a href=&quot;/page1&quot;&gt;PAGE1&lt;/a&gt;&lt;/li&gt; ...

Сформировать одномерный массив. Удалить из него элемент с заданным номером, добавить элемент с заданным номеро
Сформировать одномерный массив. Удалить из него элемент с заданным номером, добавить элемент с...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
13
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru