Jquery 到 Javascript：单击时切换类

Question

$(document).ready(function() {

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

});

任何聪明的 JavaScript 人都知道如何将上述内容编写为纯 JavaScript 吗？ 提前致谢 ：）

这是预期的行为： https : //jsfiddle.net/kevadamson/fr8usm19/

Answer 1

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

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

 div { display: inline-block; width: 100px; height: 100px; margin: 3px; background-color: rgb(255, 0, 0); cursor: pointer; } .show_on_hover { opacity: 0.3; } .show_on_hover:hover, .show_on_hover.hover { opacity: 1; }

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

这是相同的设置，将 jQuery 转换为 javascript：

 // Equivalent to $(".show_on_hover") let showOnHoverDivs = [...document.getElementsByClassName('show_on_hover')]; const showHideDivs = (event) => { for (let showOnHoverDiv of showOnHoverDivs) { // Equivalent to .not(this) if (showOnHoverDiv === event.target) continue; // Equivalent to .removeClass("hover") showOnHoverDiv.classList.remove('hover'); } // Equivalent to $(this).toggleClass("hover") event.target.classList.toggle('hover'); } // Equivalent to $(".show_on_hover").click(function() { [...] } for (let showOnHoverDiv of showOnHoverDivs) { showOnHoverDiv.addEventListener('click', showHideDivs, false); }

 div { display: inline-block; width: 100px; height: 100px; margin: 3px; background-color: rgb(255, 0, 0); cursor: pointer; } .show_on_hover { opacity: 0.3; } .show_on_hover:hover, .show_on_hover.hover { opacity: 1; }

 <div class="show_on_hover"></div> <div class="show_on_hover"></div> <div class="show_on_hover"></div> <div class="show_on_hover"></div> <div class="show_on_hover"></div>

Answer 2

仅为类为.show_on_hover的第一个元素添加单击侦听.show_on_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');
  }
})

为每个类为.show_on_hover元素添加点击监听.show_on_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');
  }
}));

Answer 3

你可以使用classList

您可以进行切换、删除、添加以及条件操作

var btn = document.querySelector('.show_on_hover')
btn.classList.toggle('hover);