Как повесить одно событие на несколько элементов?

193
25 октября 2018, 16:30

Допустим есть такой html код

<div class="block">
    <div data-test="one">
    one
    </div>
    <div data-test="two">
    two
    </div>
</div>

Как можно вызвать разные событие по одному клику в зависимости от того на какой атрибут нажали

Например 

$('.block').click (
//если нажали на data-test="two" то что то делаем
// если нажали на data-test="one" то делаем другое
)
Answer 1

$('.block > div').click(function() { 
  if ($(this).attr('data-test') === 'two') { 
    console.log('если нажали на data-test="two" то что то делаем') 
  } else if ($(this).attr('data-test') === 'one') { 
    console.log('если нажали на data-test="one" то делаем другое') 
  } 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="block"> 
  <div data-test="one"> 
    one 
  </div> 
  <div data-test="two"> 
    two 
  </div> 
</div>

Answer 2

У объекта Event есть свойство target, которое содержит ссылку на целевой (т.е. самый вложенный) элемент DOM структуры, который принял событие. Вы можете прочитать значения атрибутов этого элемента. (для работы с атрибутом data- в jQuery можно использовать метод data())

$(function () { 
  $('.block').click(function(evt) { 
    alert($(evt.target).data('test')) 
  }) 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="block"> 
    <div data-test="one"> 
    one 
    </div> 
    <div data-test="two"> 
    two 
    </div> 
</div>

Answer 3

Можно использовать прием делегирование событий. Он заключается в том, что если у нас есть много элементов, события на которых нужно обрабатывать похожим образом, то вместо того, чтобы назначать обработчик каждому – мы ставим один обработчик на их общего предка. Из него можно получить целевой элемент event.target, понять на каком именно потомке произошло событие и обработать его.

document 
   .querySelector('.container') 
   .addEventListener('click', 
          event => console.log(event.target.dataset.test))
<div class="container"> 
  <div data-test="one"> 
    one 
  </div> 
  <div data-test="two"> 
    two 
  </div> 
</div>

READ ALSO
Что не так с JQ кодом?
javascript

Что не так с JQ кодом?

Захватываю левую кнопку, присваиваю ей класс chosen, одновременно убирая его в правой кнопкеЗахватываю правую кнопку, присваиваю тот же класс,...

 176
Java scripts сложение
javascript

Java scripts сложение

var num_first = documentgetElementById("one") // допустим что в "one" ввели 5

 173
Вывести надпись по центру
HTML

Вывести надпись по центру

Столкнулся с проблемойЯ не знаю как определенную надпись сделать по центру сайта

 198
JS/JQ. Автоматический клик по блоку не всегда срабатывает
HTML

JS/JQ. Автоматический клик по блоку не всегда срабатывает

Есть ссылка вида siteru/#brand=10 При переходе на нее должен срабатывать клик по блоку с data-id=10

 183