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

вы можете использовать classList

, вы можете переключаться, удалять, добавлять, а также с условием

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

Answer 3

Добавить прослушиватель кликов только для первого элемента с классом .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:

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');
  }
}));