Jquery to Javascript: Toggle class on click

user_2692031 0
Viewed 343
$(document).ready(function() {

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

});

Any clever JavaScript person know how to write the above as plain JavaScript? Thanks in advance :)

Here's the intended behavior: https://jsfiddle.net/kevadamson/fr8usm19/

jquery javascript
3 Answers

Here is your original (using 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>

Here is the same setup, with jQuery translated into 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>

user_38977750

Add click listener only for the first element with class .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');
  }
})

Add click listener for each element with class .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');
  }
}));
user_31537990

you can use classList

you can do toggle, remove, add, and also with condition

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