Adding only a single instance of a class

Question

I'm trying to add a class to an element using jQuery. If the user clicks on an element it adds a class, which I can do, but I want only 1 instance of that class to be active so if the user clicks on something else that class is then removed from the previous element and added to the current one.

https://jsfiddle.net/gsuxjce2/3/

<div class="row">
  <div class="col">
    <div class="box">

    </div>
  </div>
  <div class="col">
    <div class="box">

    </div>
  </div>
  <div class="col">
    <div class="box">

    </div>
  </div>
  <div class="col">
    <div class="box">

    </div>
  </div>
</div>

.col {
  width: 25%;
  float: left;
}

.box {
  width: 50px;
  height: 50px;
  background-color: red;
  cursor: pointer;
}

.added {
  background-color: blue;
}

 $('.box').click(function() {
        $(this).toggleClass('added');

    if ( $(this).hasClass('added'); ) {
                    $(this).removeClass('added');
    } else {
            $(this).toggleClass('added');
    }

 });

$('.foo').removeClass('foo')

C3roe
– C3roe

2016-02-22 16:15:57 +00:00
Commented Feb 22, 2016 at 16:15 — C3roe
– C3roe, Commented Feb 22, 2016 at 16:15

j08691 · Accepted Answer · 2016-02-22 16:19:27Z

3

Remove the .added class from all .box elements first, then just add it to the one clicked on with this:

 $('.box').click(function() {
     $('.box').removeClass('added');
     $(this).addClass('added');
 });

 $('.box').click(function() {
   $('.box').removeClass('added');
   $(this).addClass('added');
 });

.col {
  width: 25%;
  float: left;
}
.box {
  width: 50px;
  height: 50px;
  background-color: red;
  cursor: pointer;
}
.added {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
  <div class="col">
    <div class="box">

    </div>
  </div>
  <div class="col">
    <div class="box">

    </div>
  </div>
  <div class="col">
    <div class="box">

    </div>
  </div>
  <div class="col">
    <div class="box">

    </div>
  </div>
</div>

answered Feb 22, 2016 at 16:19

j08691

208k33 gold badges269 silver badges281 bronze badges

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

2 Comments

lejimmie Over a year ago

Love how simple this is! Is it the 'this' that's stopping all the other ones from also adding the class?

j08691 Over a year ago

The this above refers to the .box element being clicked on.

Rodrigo Graça · Accepted Answer · 2016-02-22 16:18:53Z

2

$('.added').removeClass('added');

inside your click event before everything.

answered Feb 22, 2016 at 16:18

Rodrigo Graça

2,1853 gold badges18 silver badges24 bronze badges

1 Comment

lejimmie Over a year ago

Thanks - this is the one I saw first and tried even though j08691 answered the same as well

Emil S. Jørgensen · Accepted Answer · 2016-02-22 16:26:26Z

1

Just add this to the start of you click event:

jQuery(".added").each(function(i,el){
    jQuery(el).removeClass("added")
});

This removes all instances of the class, so that when you add one new, then that will be unique.

edited Feb 22, 2016 at 16:26

answered Feb 22, 2016 at 16:16

Emil S. Jørgensen

6,3891 gold badge17 silver badges30 bronze badges

4 Comments

James Thorpe Over a year ago

Any particular reason you included .each?

lejimmie Over a year ago

What does the i, el do?

Emil S. Jørgensen Over a year ago

To lejimmie: i is the current index in the array of elements that contain the class added and el is the current element. The el is simply a reference to an of the HTML element that contain the class. To James Thorpe: I was going for the most versatile solution, since that would be easiest for a green developer to extend from. Rodrigo Graça's solution though is more professional and a lot nicer to look at.

lejimmie Over a year ago

Thanks for the explanation. Noted :)

Collectives™ on Stack Overflow

Adding only a single instance of a class

3 Answers 3

2 Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related