jquery 喜欢 class 选择器并在纯 js 中使用 $(this)

Question

我想制作一个像 jquery 中那样的 js class 选择器。

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

我试过 javascript 。

function myFunction(this){
    alert(this).value;
}
document.getElementsByClassName('someClass').onclick = "myFunction";

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

这不是重复的...如果您找到它，请帮助我 LINK

Answer 1

使用 querySelectorAll 获取具有 class 的所有元素，然后使用 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 喜欢 class 选择器并在纯 js 中使用 $(this)

jquery like class selector and using $(this) in pure js

javascript

jquery

jquery-selectors