Блог

Главная - Вопросы по программированию - Узнайте, какой div был нажат, и передайте его обработчику функции click?

Узнайте, какой div был нажат, и передайте его обработчику функции click?

#javascript #jquery #jquery-events

Вопрос:

Я добавляю список дочерних дивов (карточек), просматривая массив. Я хочу создать прослушиватель onclick событий для каждого дочернего div (карточки) родительского div (доски).

 $.each(cardArray, function(i,value){

if(i<9){
  var tCard = $('<div class="cardContainer" title="' cardArray[i]['name'] '" data-id="' i '">' cardArray[i]['damage'] '</div>')
  $("#area_myCards").append(tCard)
}

});
$("#area_myCards > .cardContainer").on('click',cardClick()) 
     <div id="area_myCards"></div>

но я не уверен, как узнать, на какой дочерний div был нажат, и передать его cardClick() ?
Я также собираюсь использовать идентификатор данных ребенка внутри cardClick() , и я хотел бы знать, как это получить-должен ли я каким — то образом передать его функции в прослушивателе при нажатии или сделать это внутри функции?

Ответ №1:

Что-то вроде этого?

 const cardArray = [
  {name: 'A', damage: 'A-D'},
  {name: 'B', damage: 'B-D'},
  {name: 'C', damage: 'C-D'},
  {name: 'D', damage: 'D-D'},
  {name: 'E', damage: 'E-D'},
  {name: 'F', damage: 'F-D'},
  {name: 'G', damage: 'G-D'},
  {name: 'H', damage: 'H-D'},
  {name: 'I', damage: 'I-D'}
];
$.each(cardArray, function(i,value){

if(i<9){
  var tCard = $('<div class="cardContainer" title="' cardArray[i]['name'] '" data-id="' i '">' cardArray[i]['damage'] '</div>')
  $("#area_myCards").append(tCard)
}

});
$("#area_myCards > .cardContainer").on('click',e => cardClick(e.target))

const cardClick = (div) => {
  $(div).toggleClass('clicked');
}; 
 .cardContainer { margin: 2px; padding: 10px; border: 1px solid #eee; }
.cardContainer.clicked { background-color: red; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="area_myCards"></div>

Ответ №2:

Предполагая, что cardClick() это определено где-то еще, прежде всего, вы бы назвали это с $("#area_myCards > .cardContainer").on('click',cardClick) (без скобок в конце).

Эта функция передаст событие в качестве своего первого аргумента (обычно вызываемого e ), и у события есть вызываемое свойство currentTarget , которое можно использовать, чтобы увидеть, какой экземпляр был нажат.

Из MDN:

Свойство currentTarget только для чтения интерфейса события определяет текущую цель для события, когда событие проходит через DOM. Он всегда ссылается на элемент, к которому был прикреплен обработчик события, в отличие от Event.target, который идентифицирует элемент, на котором произошло событие и который может быть его потомком.

Таким образом, функция cardClick будет выглядеть примерно так:

 const cardClick = (e) => {
    const targetInstance = e.currentTarget;
    // Do stuff with your specific card...
    // To access data-id: targetInstance.getAttribute('data-id') 
    // or targetInstance.dataset.id
}
Метки: , ,