jQuery-单击时检测TD ID

Question

当我单击表的行时，我试图获取TD ID。

我一直在寻找实现这一目标的方法，并找到了一种方法。 但是每次我单击时，都会弹出一个警报，但它是一个空文本。 使用控制台，我看到的是错误代码为“ undefined”。

这是我的代码：

function chooseCell() {
let square = 0;
let squareNumber = 0;
$("td").click((e) => {
    let data = $(this).attr('id');
    alert (data);
    for (square in squarePositions) {
            squareNumber += 1;
            if (square[1] <= e.pageX <= square[3] && square[0] <= e.pageY <= square[2]) {
                alert(squareNumber);
                alert("Square Number : " + squareNumber);

            }
        }
    }
)}

如果我将Alert（data）替换为：

alert($('td').attr('id'));

警报会弹出第一个表的TD。 每当我单击其他TD时，都会显示第一个ID

有人知道如何显示当前单击的ID吗？ 在Google和SOF上没有我的问题的答案

非常感谢。致以最诚挚的问候。

Answer 1

您正在为事件处理程序使用箭头功能。

在全局上下文中执行时，箭头函数不会重新定义其自身。 而是使用封闭执行上下文的this值，等效于将此视为封闭值。

$("td").click((e) => {
    let data = $(this).attr('id');
    alert (data);
     // ...
});

因此，在您的代码中， this并不像您期望的那样引用td 。 您可以使用event.target通过以下代码访问td

let data = $(e.target).attr('id');

或者，您也可以使用常规函数代替箭头函数，现在this将引用td

$("td").click(function(e){
    let data = $(this).attr('id');
    alert (data);
     // ...
});