JQuery how to add color to div on selection
Hi, I would like to ask for help.
I have this jquery script where the user has to choose between two buttons (male or female).
My code was not flexible. If someone has clicked and colored, I cannot return the button to its normal color when I select another.
$(document).ready(function(){
$('.man-btn').on('click', function() {
if($('.man-btn').hasClass('color')) {
$('.man-btn').css('background', 'pink');
}else
$('.man-btn').css('background', '#25273e');
};
});
$('.woman-btn').on('click', function() {
if($('.woman-btn').hasClass('color')) {
$('.woman-btn').css('background', 'pink');
}else
$('.man-btn').css('background', '#25273e');
});
});
});
Here is my html:
<div name="gender">
<div class="man-btn color" value="1">
<span>Man</span>
<div class="man" >
<i class="fa fa-male" aria-hidden="true"></i>
</div>
</div>
<div class="woman-btn color" value="2">
<span>Woman</span>
<div class="woman">
<i class="fa fa-female" aria-hidden="true"></i>
</div>
</div>
</div>
Please help me! appreciate your help!
Do it as shown below: -
Example: -
$(document).ready(function(){
$('.color').on('click', function() { // use the common class click event
var gender = $.trim($(this).children('span').text());
console.log(gender);
$('.color').removeClass('pink');
$(this).addClass('pink');
});
});
.pink{
background :pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div name="gender">
<div class="man-btn color" value="1">
<span>Man</span>
<div class="man" >
<i class="fa fa-male" aria-hidden="true"></i>
</div>
</div>
<div class="woman-btn color" value="2">
<span>Woman</span>
<div class="woman">
<i class="fa fa-female" aria-hidden="true"></i>
</div>
</div>
</div>
When you click the Human button, change the class of both buttons, not just the human.
When you click the Woman button, change the class of both buttons, not just the woman.
Use classes to change colors. Remove one class and add another one.
Much easier to switch the class and put the style in a css rule:
$(document).ready(function() {
var $buttons = $('.man-btn, .woman-btn').on('click', function() {
var $btn = $(this)
$btn.toggleClass('color-pink', $btn.hasClass('color'));
// remove from other one
$buttons.not(this).removeClass('color-pink')
});
});
.color-pink {
background: pink
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div name="gender">
<div class="man-btn color" value="1">
<span>Man</span>
<div class="man">
<i class="fa fa-male" aria-hidden="true"></i>
</div>
</div>
<div class="woman-btn color" value="2">
<span>Woman</span>
<div class="woman">
<i class="fa fa-female" aria-hidden="true"></i>
</div>
</div>
</div>
Use this code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.man-btn').on('click', function() {
if($('.man-btn').hasClass('color')) {
$('.man-btn').css('background', 'pink');
}else{
$('.man-btn').css('background', '#25273e');
}
});
$('.woman-btn').on('click', function() {
if($('.woman-btn').hasClass('color')) {
$('.woman-btn').css('background', 'pink');
}else{
$('.man-btn').css('background', '#25273e');
}
});
});
</script>
</head>
<body>
<div name="gender">
<div class="man-btn color" value="1">
<span>Man</span>
<div class="man" >
<i class="fa fa-male" aria-hidden="true"></i>
</div>
</div>
<div class="woman-btn color" value="2">
<span>Woman</span>
<div class="woman">
<i class="fa fa-female" aria-hidden="true"></i>
</div>
</div>
</div>
</body>
</html>
You can simplify this. Just use one class as the button class ( gender
) and use the class to set the background color. When any button is clicked, remove all instances of the class gender
, then add the class to $(this)
:
$(document).ready(function(){
$(".gender").on("click", function() {
$(".pinkbg").removeClass("pinkbg");
$(this).addClass("pinkbg");
});
});
.pinkbg {
background: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div name="gender">
<div class="gender man-btn color" value="1">
<span>Man</span>
<div class="man" >
<i class="fa fa-male" aria-hidden="true"></i>
</div>
</div>
<div class="gender woman-btn color" value="2">
<span>Woman</span>
<div class="woman">
<i class="fa fa-female" aria-hidden="true"></i>
</div>
</div>
</div>
You will find another solution here https://jsfiddle.net/ma9hzLc1/
$(document).ready(function(){
$('.color').on('click', function() {
$(this).addClass('pink').siblings('.color').removeClass('pink');
});
});
.pink{
background :pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="man-btn color" value="1">
<span>Man</span>
<div class="man" >
<i class="fa fa-male" aria-hidden="true"></i>
</div>
</div>
<div class="woman-btn color" value="2">
<span>Woman</span>
<div class="woman">
<i class="fa fa-female" aria-hidden="true"></i>
</div>
</div>