JQuery how to add color to div on selection

Question

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!

+3

jquery

Kobe bryan 03 Aug 17 at 16:12

source to share

6 answers

Alive to Die · Answer 1 · 2017-08-03T16:17:33+0000

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>

Run code Hide result

Jerinaw · Answer 2 · 2017-08-03T16:15:20+0000

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.

charlietfl · Answer 3 · 2017-08-03T16:23:16+0000

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>

Run code Hide result

Chandra kumar · Answer 4 · 2017-08-03T16:18:22+0000

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>

Run code Hide result

SeanKendle · Answer 5 · 2017-08-03T16:19:11+0000

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>

Run code Hide result

Shiladitya · Answer 6 · 2017-08-03T16:46:49+0000

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>

Run code Hide result

JQuery how to add color to div on selection

More articles: