CODEWITHSUNDEEP
jquery
Kobe Bryan
Kobe Bryan

Reputation: 317

jQuery how to add colour to div when selected

Hi I would like ask for help.

I have this jQuery script where the user must pick between the 2 buttons (man or woman).

My code wasn't flexible. If the one has been clicked and coloured, I can't get the button back to its normal colour when I picked the other one.

$(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's 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!

Upvotes: 3

Views: 102

Answers (6)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

Do it like 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>

Upvotes: 4

Shiladitya
Shiladitya

Reputation: 12181

Here you go with one more solution 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>

Upvotes: 2

Sean Kendle
Sean Kendle

Reputation: 3619

You can simplify this greatly. Just use one class as the button class (gender) and use a class to set the background color. On click of any button, 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>

Upvotes: 2

charlietfl
charlietfl

Reputation: 171669

Much simpler to toggle a class and put the style into 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>

Upvotes: 3

Chandra Kumar
Chandra Kumar

Reputation: 4205

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>

Upvotes: 2

Jerinaw
Jerinaw

Reputation: 5529

When you click the man button, change the class of both buttons, not just man.

When you click the woman button, change the class of both buttons, not just woman.

Use classes to change the colors. Remove one class, and add another.

Upvotes: 3

Related Questions