jquery 喜欢类选择器并在纯 js 中使用 $(this) [重复]

Posted 2023-05-09

【中文标题】jquery 喜欢类选择器并在纯 js 中使用 $(this) [重复]

【英文标题】：jquery like class selector and using $(this) in pure js [duplicate]

【发布时间】：2019-07-29 14:36:48

【问题描述】：

我想做一个类似 jquery 的 js 类选择器。

$('.someClass').click(function()
    alert($(this).value());
);

我在 javascript 中尝试过。

function myFunction(this)
    alert(this).value;

document.getElementsByClassName('someClass').onclick = "myFunction";

这对我不起作用，我还参考了许多其他有关堆栈溢出的论坛。

这不是重复的......如果你找到它请帮助我链接

【问题讨论】：

alert(this).value;应该是 alert(this.value);

getelementsByClassName 返回一个 htmlCollection，它不是单个元素，因此尝试在其上使用 .onclick，就好像它是单个元素一样，不正确。您必须遍历它们并应用 onclick。此外，onclick 的赋值应该只是myFunction，而不是字符串。或者，您需要考虑使用addEventListener() 方法来设置它，而不是属性。然后你的方法有.value处于警报状态的问题，而不是this。

【参考方案1】：

使用querySelectorAll 获取该类的所有元素，然后使用forEach 循环它们并为每个元素添加一个事件侦听器：

使用 jQuery 编码：

$('.someClass').click(function()
    console.log($(this).text());
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="someClass">Hello, World!</span>
<span class="someClass">1, 2!</span>
<span class="someClass">3, 4!</span>

纯 JS 编码：

var all = document.querySelectorAll('.someClass');

all.forEach((e) => 
  e.addEventListener('click', () => 
    console.log(e.innerText);
  )
);

<span class="someClass">Hello, World!</span>
<span class="someClass">1, 2!</span>
<span class="someClass">3, 4!</span>

【讨论】：

请注意，这并不完全相同。 jQuery 示例适用于 DOM 中 .someClass 的每个实例，而您的纯 JS 版本仅适用于第一个实例

这就是我的全部观点。人们对我的问题投了反对票。我只需要知道如何使它像 jquery 一样。这也不是重复的。

@RoryMcCrossan 没错，我把它改成了querySelectorAll。

@MrGeek 甚至 querySelector 也不起作用.. 它只是为我提供了第一个结果。

@user9514246 我改了，现在是 querySelectorAll，我正在使用forEach 循环，检查更新后的答案。