Jquery addClass removeClass if clicking same class

Question

This code below works. I am trying to also add that if the .hero-build-wrap already added the class to hero-build , and you click it again it removes it. I tried with .toggleclass instead of .addClass but didnt work

$(function() {
  $(".hero-build-wrap").click(function() {
    $(".hero-build").removeClass("hero-selected");
    $(this).children(".hero-build").addClass("hero-selected");
  });
});

The HTML:

<div class="hero-build-wrap">
   <a class="hero-mini hero-mini-assa">
     <img class="hero-hover-big" src="">
     <img class="hero-hover-small"src=">
   </a>
   <div class="hero-build hero-selected">
      <a href="">
        <p>This is a test</p>
      </a>
      <a href="">
        <p>Anothertest</p>
      </a>
   </div>
</div>

charlietfl · Accepted Answer · 2016-10-08 15:46:58Z

2

Remove the line that adds the class

$(function() {
  $(".hero-build-wrap").click(function() {    
    $(this).children(".hero-build").toggleClass("hero-selected");
  });
});

If you add a class , then toogle that class , the end result would be it would cancel adding it

That being said, you may also be trying to remove the class elsewhere since $().children is a very strange call

If so you can do something like:

$(function() {
  $(".hero-build-wrap").click(function() { 
    var $children =  $(this).children(".hero-build").toggleClass("hero-selected");
    $('.hero-selected').not($children).removeClass("hero-selected");
  });
});

edited Oct 8, 2016 at 15:46

answered Oct 8, 2016 at 15:16

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

charlietfl Over a year ago

always try to provide expected behavior also along with some basic html structure... I had to assume there were other elements involved ...and happened to guess correctly

Karuw Over a year ago

Oh yeah, I just realised that it does not work correctly, because it adds the hero-selected to another div too, and it shouldnt. It still works but I think it does more than it should. Let me add the html in a sec.

Karuw Over a year ago

With the code it also gets added to the div with the class hero-mini

charlietfl Over a year ago

fixed...just needed the ".hero-build" selector in children()

Collectives™ on Stack Overflow

Jquery addClass removeClass if clicking same class

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related