Jquery到Javascript：点击切换类

任何聪明的JavaScript人员都知道如何将上述内容编写为普通JavaScript？提前感谢：）

---

以下是预期的行为：

仅为类为

的第一个元素添加click listener。悬停时显示：

$(document).ready(function() {

    $(".show_on_hover").click(function() {
        $(".show_on_hover.hover").not(this).removeClass("hover");
        $(this).toggleClass("hover");
    });

});

const btn = document.querySelector('.show_on_hover');
btn.addEventListener('click', () => {
  if (btn.classList.contains('hover')) {
    btn.classList.remove('hover');
  } else {
    btn.classList.add('hover');
  }
})

为类为
的每个元素添加单击侦听器。悬停时显示：

$(document).ready(function() {

    $(".show_on_hover").click(function() {
        $(".show_on_hover.hover").not(this).removeClass("hover");
        $(this).toggleClass("hover");
    });

});

const btn = document.querySelector('.show_on_hover');
btn.addEventListener('click', () => {
  if (btn.classList.contains('hover')) {
    btn.classList.remove('hover');
  } else {
    btn.classList.add('hover');
  }
})

你可以用

您可以切换、删除、添加，也可以使用条件

const btns = document.querySelectorAll('.show_on_hover');
btns.forEach(el => el.addEventListener('click', () => {
  if (btn.classList.contains('hover')) {
    el.classList.remove('hover');
  } else {
    el.classList.add('hover');
  }
}));

这是您的原件（使用jQuery）：


$（文档）.ready（函数（）{
$（“.show_on_hover”）。单击（函数（）{
$（“.show_on_hover.hover”）.not（this.removeClass（“hover”）；
$（this.toggleClass（“悬停”）；
});
});
div{
显示：内联块；
宽度：100px；
高度：100px；
保证金：3倍；
背景色：rgb（255,0,0）；
光标：指针；
}
.在悬停时显示{
不透明度：0.3；
}
.悬停时显示悬停：悬停，
.show_on_hover.hover{
不透明度：1；
}

到目前为止，您尝试了什么？并将使您走上正确的轨道。谢谢：）在
包含（'hover'）后缺少
）
？似乎可以在页面上的第一个实例上添加和删除，但其他实例不起作用…您不想使用此类处理所有按钮的单击？是的，请。所有实例都需要在单击时切换，但随后也会从页面中删除其他实例，因此只有一个实例添加了类-有意义吗？现在，当单击所有其他实例时，会在第一个实例上切换类。预期的行为如下：a）当我单击项目时，它会添加类，然后再次单击它，它会将其删除b）如果页面上的另一个
show\u on\u hover
实例已被单击，并且具有
hover
类，则在单击另一个实例时，它会被删除，因此，在任何时候，只有一个实例可以有类
hover
。一定要询问是否有什么您不确定的地方，或者javascript语法中是否有任何部分对您来说没有意义。只有10-12个构建块被提交到内存中，您会发现将jQuery转换为普通javascript变得非常简单。