我通過回圈遍歷陣列來添加子 div（卡片）串列。我想為父 div（板）的每個子 div（卡）創建一個 onclick 事件偵聽器。
$.each(cardArray, function(i,value){
if(i<9){
var tCard = $('<div 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() 中使用 childs 資料 ID，我想知道如何獲取它 - 我應該以某種方式將它傳遞給 on click 偵聽器中的函式，還是在函式中執行？
uj5u.com熱心網友回復：
像這樣的東西？
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 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>uj5u.com熱心網友回復：
假設它cardClick()是在其他地方定義的，首先，您將使用$("#area_myCards > .cardContainer").on('click',cardClick)（末尾沒有括號）呼叫它。
該函式將傳遞一個事件作為它的第一個引數（通常稱為e），并且該事件有一個名為的屬性currentTarget，可用于查看單擊了哪個實體。
來自 MDN：
當
currentTarget事件遍歷 DOM 時，Event 介面的只讀屬性標識事件的當前目標。它始終指的是事件處理程式已附加到的元素，而不是 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
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/360997.html
標籤：javascript 查询 javascript 事件