0

Допустим есть такой 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" то делаем другое
) 

3 ответа 3

2

$('.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>

2
  • 1
    можно не переносить класс: $('.block > div').click(
    – user176262
    10 авг 2018 в 12:42
  • @Igor Вы правы, спасибо за уточнение.
    – user218976
    10 авг 2018 в 12:45
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>

1

Можно использовать прием делегирование событий. Он заключается в том, что если у нас есть много элементов, события на которых нужно обрабатывать похожим образом, то вместо того, чтобы назначать обработчик каждому – мы ставим один обработчик на их общего предка. Из него можно получить целевой элемент 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.