單擊獲取特定節點元素的數據

Question

我正在嘗試獲取特定數據，具體取決於用戶單擊的節點元素。 我有4個使用querySelectorAll代碼定位的元素。 我要實現的是，如果單擊第一個元素，則將console.log該特定數據，如果選擇第三個元素，則將記錄該數據。 我已經嘗試了幾件事，但是還沒有開始工作。

 function selectedSplit() { var macroSplits = document.querySelectorAll(".card"); console.log(macroSplits[0].childNodes[3].childNodes[1].innerHTML); } 

Answer 1

目前尚不清楚您在何處使用selectedSplit是否將其用作事件偵聽器返回函數。 但是使用onClick事件偵聽器，將向您返回函數傳遞所需的信息。

如果您想在標記中完成此操作，則可以-

<div class='card' onClick="selectedSplit"></div>

然后，您可以簡單地通過event.target訪問它

function selectedSplit(event) {
  var thisCard=event.target;
  console.log(thisCard.innerHTML);
}

Answer 2

event.target具有clicked元素：

 d.onclick = e => console.log(e.target) 

 <div id=d> <button><b>b</b></button> <button><i>i</i></button> <button><u>u</u></button> <button><s>s</s></button> </div>