首页 > 网页制作 >正确获取被点击同名类元素内容的方法

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

来源：互联网 2026-07-16 07:08:11

jQuery事件处理中，箭头函数的this不指向触发事件的DOM元素，导致无法获取被点击元素内容。改用普通函数后，this正确指向当前元素，可顺利提取其文本。

在 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 指向当前元素

将箭头函数替换为普通函数（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());   // 获取文本

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