jquery - Replace a DIV with multiple class with a new class on click

Question

My HTML is as follow.

<div class="box w-25 h-25">
<p>test</p>
</div>
<div class="box w-30 h-30">
<p>test</p>
</div>
<div class="box w-30 h-30">
<p>test</p>
</div>

and my css

.test {
width:100%
height:100%
z-index: 999
}

.box {
....
}

.w-25{ width: 25%; }
.w-30{ width: 30%; }
.w-40{ width: 40%; }

.h-25{ height: 25%; }
.h-30{ height: 30%; }
.h-40{ height: 40%; }

Is it possible to replace the original class with .test when I click on them individually with jQuery as to create an overlay effect?

Answer 1

Remove/Replace Classes

There are a few ways to remove all classes, and leave only one. You could use $.attr:

$(".box").on("click", function(){
  $(this).attr("class", "test");
});

This sets the full value of class to a single classname. Alternatively, you could set the className on the element itself:

$(".box").on("click", function(){
  this.className = "test";
});

Or, you could call $.removeClass() without any arguments (which removes all classes), and then follow that up by adding your test class:

$(".box").on("click", function(){
  $(this).removeClass().addClass("test");
});

Avoid Ambiguity

I'm assuming that you don't have any other .box elements on the page - if you do, the selector used here would need to be modified just a bit to affect only the boxes we wish to target.

If these boxes were within a larger container:

<div id="boxes">
  <div class="box w-25 h-25">...</div>
  <div class="box w-30 h-30">...</div>
</div>

We might change our selector to include the container id:

$("#boxes .box").on("click" function(){
  /* React */
});

Toggle On/Off

From the comments, the OP expressed a desire to remember the original classes, and swap .test out for them if the element were clicked on a second time. Below is one possible solution to this:

$(".box").on("click", function(){
  // Store original class attribute as data
  $(this).data("o") || $(this).data("o", $(this).attr("class"));
  // Set new class attribute to test, or to original
  $(this).attr("class", function(i,o){
    return o != $(this).data("o") ? $(this).data("o") : "test" ;
  });
});

Answer 2

If you want to remove all classes from a a div, all you would have to do is :

$('.box').attr('class', 'test');

this will replace the entire class attribute with whatever you want. or you can just empty out the class attribute :

$('.box').attr('class', '');

and then do addClass for any classes you would need programatically using:

$('.box').addClass('test');

Answer 3

$(".box").on("click", function(){
  $(this).removeClass(). // remove all class
         addClass("test");
});

Answer 4

This will keep on toggling the box class with test. Also, I have added the check wherein class will be changed only if div have other class i.e. w-xx and h-xx too.

@Jonathan , Please see how can we improve this one. I have create the demo here: http://jsbin.com/ucotot/

$(function() {
  $('div.box').click ( function () {
    var classes = $(this).attr ('class').split(' ');

    var widthClassFound = false;
    var heightClassFound = false;
    for ( i = 0; i < classes.length; i++ ){
      if ( classes[i].match("^w-") ){
        widthClassFound = true;
    }

      if ( classes[i].match("^h-") ){
        heightClassFound = true;
    }

    }

    if ( widthClassFound && heightClassFound ) {
      if ( $(this).data('originalClass') ) {
        $(this).removeClass().addClass($(this).data('originalClass'));
        $(this).removeData('originalClass'); 
      }else{

      $(this).data ( 'originalClass', $(this).attr ('class') ); //Saving all class box, w-xx , h-xx
       $(this).removeClass('box').addClass('test');

      }

    }


  });

});

Edit

Above code toggles box class with test, as @Clement is asking to toggle all classes with test following code can be used. see demo: http://jsbin.com/ucotot/3

   $(function() {
  $('div.box, div.test').click ( function () {
    if ( $(this).data('originalClass') ) {  // if 'originalClass' is present in data then use it and return;
         $(this).removeClass().addClass($(this).data('originalClass'));
        $(this).removeData('originalClass'); 

      return;

    }


    var classes = $(this).attr ('class').split(' ');

    var widthClassFound = false;
    var heightClassFound = false;
    for ( i = 0; i < classes.length; i++ ){
      if ( classes[i].match("^w-") ){
        widthClassFound = true;
    }

      if ( classes[i].match("^h-") ){
        heightClassFound = true;
    }

    }

    if ( widthClassFound && heightClassFound ) {


      $(this).data ( 'originalClass', $(this).attr ('class') ); //Saving all class box, w-xx , h-xx
       $(this).removeClass().addClass('test');



    }


  });

});