CODEWITHSUNDEEP
javascriptjquerycssif-statement
galexy
galexy

Reputation: 343

Removing current css class and adding new class using jquery

How to remove current class added to div and add new class according to condition set?

My css contain 3 different classes: 

.red   { background:red }

.blue  { background:blue }

.green { background:green }

at the time I want to add only one class to div id #box according to condition set by jquery variable my_color .my_color has 3 values blood,garden,sky only one set at the time.

jquery:

<script type="text/javascript">  
 (document).ready(function() {

      if(my_color == "blood")
             { /*help me to remove  current class and add .red */}
      else if(my_color == "garden")
             {/*help me to remove  current class and add .green */ }
      else if(my_color == "sky")
             {/*help me to remove  current class and add .blue */ }

 });
</script>

Upvotes: 0

Views: 6952

Answers (6)

Nirman
Nirman

Reputation: 6783

$('#selectorId').removeClass('red');
$('#selectorId').addClass('green');

Upvotes: 0

Matt Zeunert
Matt Zeunert

Reputation: 16561

You can remove all classes before assigning a new one:

 (document).ready(function () {
     $(element).removeClass("red blue green");
     if (my_color == "blood") {
         $(element).addClass("red");
     }
     if (my_color == "garden") {
         $(element).addClass("green");
     }
     if (my_color == "sky") {
         $(element).addClass("blue");
     }
 });

Using .attr('class', '') instead of removeClass will work too, but it will also remove any other classes your element might have.

You can also use a mapping object to clean up the code a bit:

 (document).ready(function () {
     $(element).removeClass("red blue green");
     var colorDictionary = {
         "blood": "red",
         "garden": "green",
         "sky": "blue"
     };
     $(element).addClass(colorDictionary[my_color]);
 });

Upvotes: 1

EnterJQ
EnterJQ

Reputation: 1014

<script type="text/javascript">  
  (document).ready(function() {

  if(my_color == "blood")
         {$("#select_element").removeClass("blue").addClass("red");}
  else if(my_color == "garden")
         { $("#select_element").removeClass("red").addClass("green"); }
  else if(my_color == "sky")
         { $("#select_element").removeClass("green").addClass("blue"); }

  });
 </script>

Upvotes: 0

Hary
Hary

Reputation: 5818

you can do this with $.removeAttr() and $.addClass().

At first remove all the classes set to the #div and then only apply the needed class. To be more specific you can only remove the unwanted class with $.removeClass()

 (document).ready(function() {

   $("#box").removeAttr("class");

      if(my_color == "blood")
         { 
            $("#box").addClass("red"); 
         }
      else if(my_color == "garden")
         { 
            $("#box").addClass("green"); 
         }
      else if(my_color == "sky")
         { 
            $("#box").addClass("blue"); 
         }

 });

Upvotes: 0

salexch
salexch

Reputation: 2704

$('#box').attr('class', '').addClass(my_color );

Upvotes: 1

Anton
Anton

Reputation: 32581

this replaces the class on box with red/green/blue

   if(my_color == "blood")
           {  $('#box').attr('class','red');}
      else if(my_color == "garden")
            { $('#box').attr('class','green');}
      else if(my_color == "sky")
         {   $('#box').attr('class','blue');}

Upvotes: 1

Related Questions