在 jQuery 中，使用箭头函数绑定事件时，this 不指向触发事件的 DOM 元素，导致 $(this).text() 返回空字符串；必须改用普通函数才能正确访问当前点击元素。
在 jquery 中，使用箭头函数绑定事件时，`this` 不指向触发事件的 dom 元素，导致 `$(this).text()` 返回空字符串；必须改用普通函数才能正确访问当前点击元素。
当你为多个具有相同 class（如 .adressLine）的
绑定点击事件，并希望获取当前被点击的那个元素的文本内容时，关键在于正确理解事件处理函数中 this 的指向。
❌ 错误写法：箭头函数导致 this 失效
const adressLine = $('.adressLine');
adressLine.on('click', () => {
console.log('button clicked');
var text = $(this).text(); // ⚠️ 箭头函数不绑定 this，此处 this 指向外层作用域（通常是 window）
console.log(text); // 输出空字符串或 undefined
});
箭头函数不会创建自己的 this 上下文，而是继承自外层作用域。因此 $(this) 并非指向被点击的 .adressLine 元素，自然无法获取其内容。
✅ 正确写法：使用普通函数（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) 将其包装为 jQuery 对象，.text() 即可准确提取该单个元素的文本内容。? 验证技巧：打印 this 和 $(this)
可在回调中加入调试语句：
console.log('Native element:', this); // 查看原生 DOM 节点
console.log('jQuery object:', $(this)); // 查看 jQuery 包装对象
console.log('Text content:', $(this).text()); // 获取文本
? 补充建议
- 若需同时获取数据属性（如 data-id），可用 $(this).data('id')；
- 避免重复查询：如需多次操作该元素，建议缓存 const $el = $(this);；
- 确保 DOM 已就绪：将代码包裹在 $(document).ready(...) 或置于页面底部。
牢记：jQuery 事件回调中，this 的正确行为依赖于函数类型——普通函数可用，箭头函数不可用。
