I have a box without color. if the box is being click() it will addClass('.red') to make it red, and if click again the box color change to blue. they change alternatively. and I don't know how to make it.
<div class='box'></div>
.box {
width: 250px;
height: 100px;
border: 1px #000 solid;
}
.red {
background: red;
}
.blue {
background: blue;
}
$('div').click(function() {
$(this).addClass('red');
});
Try with toggleClass like
$('div').click(function() {
$(this).toggleClass("red");
});
If you want to toggle 2 classes red and blue then use like
$('div').click(function() {
$(this).toggleClass("red blue");
});
If you want to change from white to red, and then red to blue, you can't use toggleClass(). You'd have to write some simple conditions to decide which class to add:
$('div').click(function() {
var $this = $(this);
if ($this.hasClass('blue')) {
$this.removeClass();
} else if ($this.hasClass('red')) {
$this.removeClass('red').addClass('blue');
} else {
$this.addClass('red');
}
});
If you only want to switch between the classes red and blue, just add one of the classes to the markup, so that you can toggle between them:
<div class="blue">Hello World!</div>
Then just use toggleClass():
$('div').click(function() {
$(this).toggleClass('red blue');
});
use hasClass()
.hasClass()
to check the assigned class, try something like this:
$('div').click(function() {
if($('div').hasClass('red')) {
$(this).removeClass('red').addClass('blue');
}
else{
$(this).removeClass('blue').addClass('red');
}
});
$('div').click(function() {
if($(this).hasClass('red'))
{
$(this).addClass('blue').removeClass('red');
}
else
{
$(this).addClass('red').removeClass('blue');
}
});
.blue..blue { background:blue; } } .blue { background: blue; }