如何正确获取被点击同名类元素的内容？

在 jQuery 中，使用箭头函数绑定事件时，this 不指向触发事件的 DOM 元素，导致 $(this).text() 返回空字符串；必须改用普通函数才能正确访问当前点击元素。

在 jquery 中，使用箭头函数绑定事件时，`this` 不指向触发事件的 dom 元素，导致 `$(this).text()` 返回空字符串；必须改用普通函数才能正确访问当前点击元素。

当你为多个具有相同 class（如 .adressLine）的 <div> 绑定点击事件，并希望获取当前被点击的那个元素的文本内容时，关键在于正确理解事件处理函数中 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 元素（如 <div class="adressLine">123 Main St</div>），$(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 的正确行为依赖于函数类型——普通函数可用，箭头函数不可用。