问Jquery to Javascript:在单击时切换类

EN

$(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>

// 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>