正确获取被点击的同名类元素内容的方法

在 jQuery 中，若使用箭头函数绑定事件，this 并不会指向触发事件的 DOM 元素，因此 $(this).text() 将返回空值；必须改用普通函数，才能准确访问当前被点击元素的文本内容。

先说一个核心判断：在 jQuery 事件处理中，this 的指向完全取决于你使用的是普通函数还是箭头函数。不少开发者都在这个细节上栽过跟头。

日常开发里，我们经常需要为一组拥有相同类名（如 .adressLine）的

标签绑定点击事件，然后获取具体点击的是哪个元素，并读取它的文本内容。这个问题看似基础，但一旦用错函数类型，代码就会静默地出问题——不是报错，而是取到空字符串。

错误写法：箭头函数让 this “跑偏”了

很多人偏爱箭头函数，因为它写起来简洁。但在 jQuery 事件回调里，这恰恰是个陷阱：箭头函数不会创建自己的 this 上下文，而是直接继承外层作用域（通常是 window 或全局对象）。所以在回调中写 $(this).text()，实际上是对一个全局对象调用 .text()，结果自然是一串空值。

const adressLine = $('.adressLine');
adressLine.on('click', () => {
  console.log('button clicked');
  var text = $(this).text(); // ⚠️ 这里的 this 不指向被点击的元素
  console.log(text); // 输出空字符串或 undefined
});

问题出在哪？箭头函数的 this 是静态绑定的，它从声明时的上下文获取 this，而不是从调用时动态获取。 这与你绑定事件的初衷相悖：你希望 this 指向“谁被点击了”，但它指向的是“代码写在哪个作用域里”。

正确写法：普通函数才能拿到正确的 this

将箭头函数换成普通函数（function 表达式）就能解决。

const adressLine = $('.adressLine');
adressLine.on('click', function() { // ✅ 普通函数中 this 指向当前触发事件的 DOM 元素
  console.log('button clicked');
  const text = $(this).text().trim(); // 推荐加 .trim() 去除首尾空白
  console.log(text);
});

此时，this 就是一个原生的 DOM 节点（比如

123 Main St

想亲眼验证？打印一下 this 和 $(this)

在回调里加上几行调试代码，就能看到差异：

console.log('Native element:', this);           // 查看原生 DOM 节点
console.log('jQuery object:', $(this));         // 查看 jQuery 包装对象
console.log('Text content:', $(this).text());   // 获取文本

你会发现，普通函数下 this 是一个完整的 DOM 节点；箭头函数下，它可能指向 window 或其他无关对象。

几个实用小建议

• 需要读取数据属性？ 用 $(this).data('id') 即可，和 .text() 是同一套逻辑。
• 别频繁查询：如果后续要多次操作这个元素，最好先缓存一下：const $el = $(this);。
• 确保 DOM 已经加载完成：要么把代码包在 $(document).ready(...) 里，要么把脚本放在页面底部。

一句话总结：jQuery 事件回调中，this 的行为完全取决于函数类型——普通函数可正常获取当前元素，箭头函数则不行。 这个规则看似简单，但一旦忽略，排查起来容易绕半天。记住它，能少踩不少坑。