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

本文深入解析为什么在 jQuery 事件处理中使用箭头函数会导致 $(this) 指向错误，并介绍如何通过普通函数正确获取当前点击元素的内容。

在使用 jQuery 进行事件绑定时，常见场景是页面上有多个元素共享同一个 class（例如 .adressLine），我们需要点击某个元素并准确获取其文本内容。这个需求看似简单，但新手经常在事件回调中误用箭头函数，导致 $(this) 指向错误的对象，最终返回空字符串或 undefined。

那么，问题究竟出在哪里？

❌ 错误写法：箭头函数导致 this 无法正确绑定

const adressLine = $('.adressLine');
adressLine.on('click', () => {
  console.log('button clicked');
  var text = $(this).text(); // ⚠️ 箭头函数不绑定 this，指向外层作用域（如 window），而非当前 DOM 元素
  console.log(text); // 输出空字符串或 undefined（因为 this 错误）
});

关键点在于：箭头函数不绑定自己的 this，它会继承外层函数作用域的 this 值。在 JavaScript 严格模式下，这个值通常是 window（浏览器环境）或 undefined。而 jQuery 的事件处理机制依赖于普通函数的动态 this 绑定——当事件触发时，jQuery 会自动将 this 设置为当前匹配的 DOM 元素，即被点击的 .adressLine 元素。箭头函数打破了这种绑定规则，因此无法获取正确的元素。

✅ 正确写法：使用普通函数，确保 this 正确绑定

const adressLine = $('.adressLine');
adressLine.on('click', function() { // ← 使用普通函数，jQuery 可正确绑定 this 到当前元素
  console.log('button clicked');
  const text = $(this).text(); // ✅ 此时 this 指向被点击的 .adressLine 元素
  console.log(text); // 输出该元素内纯文本内容（不含 HTML 标签）
});

提示：根据实际需要，还可使用 $(this).html() 获取包含 HTML 标签的完整内容，或通过 $(this).attr('data-text') 读取自定义属性值，非常灵活。

如何验证 this 绑定是否正确？

在回调中加入几行调试代码，打印出 this 和 $(this) 的类型，就能一目了然：

adressLine.on('click', function() {
  console.log('Raw this:', this);           // → 输出 HTMLDivElement 实例
  console.log('jQuery this:', $(this));     // → 输出 jQuery 对象，包含该元素
  console.log('Text content:', $(this).text().trim()); // 推荐使用 trim() 清除首尾空白
});

⚠️ 重要注意事项与最佳实践

• 避免在依赖 this 事件上下文中使用箭头函数：不仅限于 jQuery，原生 addEventListener（需使用 e.currentTarget）等依赖函数级 this 绑定的场景，箭头函数都不适用。这是前端开发中必须牢记的原则。

• 确保 DOM 已加载完成：将代码包裹在 $(document).ready() 中，或将脚本放在 标签底部。否则，如果选择器执行时目标元素尚未出现在 DOM 中，返回的将是一个空集合。

• 考虑事件委托（进阶场景）：如果 .adressLine 是动态添加到页面上的元素（例如通过 AJAX 加载或用户交互后生成），直接绑定事件可能失效。此时，事件委托是更可靠的方案：

  $(document).on('click', '.adressLine', function() {
    console.log($(this).text());
  });

  其原理是将事件处理挂载到父级容器（这里使用 document 作为兜底），通过事件冒泡机制捕获来自子元素 .adressLine 的点击事件。这样，即使目标元素是后来生成的，也能被正确响应。

理解 this 在不同函数类型中的行为差异，是前端事件处理的基础。核心原则是：要访问触发事件的当前元素，请始终在 jQuery 事件回调中使用普通函数。一旦养成这个习惯，许多莫名其妙的 bug 便会迎刃而解。