首页 > 网页制作 >正确获取被点击的同名class元素的文本内容

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

来源：互联网 2026-07-15 19:42:00

在jQuery事件监听中，箭头函数不绑定自身this，导致$(this)无法指向当前点击元素，应使用普通函数使this正确绑定。同时，采用事件委托（如.on()）可处理动态元素，并确保代码在DOM加载后执行，常用$(document).ready()。

本文详解为何在 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 值，在 JavaScript 严格模式下通常是 window（浏览器环境）或 undefined。而 jQuery 的事件处理机制，天然依赖于普通函数的动态 this 绑定——当事件触发时，jQuery 会主动将 this 设置为当前匹配的 DOM 元素，也就是被点击的那个 .adressLine 元素。箭头函数打破了这种绑定规则，自然就获取不到正确的元素。

正确写法：使用普通函数，让 this 回归正轨

const adressLine = $('.adressLine');
adressLine.on('click', function() { // ← 普通函数，this 可被 jQuery 正确绑定
  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 的点击事件。这样，即使目标元素是后来才生成的，也能被正确响应。