找出点击了哪个 div 并将其传递给点击函数处理程序？

Question

我正在通过遍历数组来添加 child div 的列表（卡片）。我想为 parent div (board) 的每个 child div (card) 创建一个 onclick 事件监听器。

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

但我不确定如何找出点击了哪个 child div 并将其传递给 cardClick()？我还将在 cardClick() 中使用 child 的 data-id，我想知道如何获得它 - 我是否应该将它传递给点击时的函数以某种方式听众，还是在函数内做？

Answer 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>

Answer 2

假设 cardClick() 在其他地方定义，首先，您将使用 $("#area_myCards > .cardContainer").on('click',cardClick) 调用它（末尾没有括号）。

该函数将传递一个事件作为其第一个参数（通常称为 e），并且该事件有一个称为 currentTarget 的属性可用于查看哪个实例已被点击。

来自 MDN：

The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred and which may be its descendant.

所以 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
}

找出点击了哪个 div 并将其传递给点击函数处理程序？

Find out which div was clicked and pass it to the click function handler?

javascript

jquery

jquery-events