CODEWITHSUNDEEP
jqueryhtmlcss
user12133523
user12133523

Reputation:

I have problem with fa-thumbs-up icon color change with jquery on click event

I have made voting on posts in my project.

which is working fine but I have an issue with color change on the fa-thumbs-up icon when it clicks.

below is my code.

$(document).ready(function() {
  $(".vote_buttoon").click(function() {
    $(this).addClass('active_vote');
    var suggestion_id = $('.active_vote .fa-thumbs-up').css("color", "blue");
  });
});
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="mitem1" class="makemoney">
  <h2 class="title"><b>Item 1</b></h2>
  <p>The “<a href="https://en.wikipedia.org/wiki/Disney_Vault" target="_blank" rel="noopener noreferrer">ABC</a>” XXX</p>
  <p>XXX</p>
  <p>XXX</p>
  <p>XXX</p>
  <p>XXX</p>
  <p>XXX</p>
  <div class="up-down-vote-sec">
    <a class="up vote_buttoon"><i class="fa fa-thumbs-up" aria-hidden="true"></i></a>
    <a class="down vote_buttoon"><i class="fa fa-thumbs-down" aria-hidden="true"></i></a>
    <div class="rating"> 0 points</div>
  </div>
</div>

but I have an issue with color like a normal color of fa fa-thumbs-up is black but when the user clicks on fa fa-thumbs-up it changes color like blue or if the user clicks on fa fa-thumbs-down it changes color like red.

but it's not working.

can anybody help me with this.

Upvotes: 0

Views: 1065

Answers (4)

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

Try this: 

$(".fa-thumbs-up").click(function() {
    $(this).css("color", "blue");
    });
   $(".fa-thumbs-down").click(function() {
   $(this).css("color", "red");
  });
 <div id="mitem1" class="makemoney">
  <h2 class="title"><b>Item 1</b></h2>
  <p>The “<a href="https://en.wikipedia.org/wiki/Disney_Vault" target="_blank" rel="noopener noreferrer">ABC</a>” XXX</p>
  <p>XXX</p>
  <p>XXX</p>
  <p>XXX</p>
  <p>XXX</p>
  <p>XXX</p>
  <div class="up-down-vote-sec">
    <a class="up vote_buttoon"><i class="fa fa-thumbs-up" aria-hidden="true"></i></a>
    <a class="down vote_buttoon"><i class="fa fa-thumbs-down" aria-hidden="true"></i></a>
    <div class="rating"> 0 points</div>
  </div>
</div>

Upvotes: 0

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

You can simply use toggle class and apply css for color change and up and down both should not be clicked together

$(document).ready(function() {
  $(".vote_buttoon").click(function() {
    $(".vote_buttoon").removeClass('active_vote');
    $(this).toggleClass('active_vote');
  });
});
.up.active_vote .fa{
  color: #0000ff;
}

.down.active_vote .fa{
  color: #ff0000;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="mitem1" class="makemoney">
  <h2 class="title"><b>Item 1</b></h2>
  <p>The “<a href="https://en.wikipedia.org/wiki/Disney_Vault" target="_blank" rel="noopener noreferrer">ABC</a>” XXX</p>
  <p>XXX</p>
  <p>XXX</p>
  <p>XXX</p>
  <p>XXX</p>
  <p>XXX</p>
  <div class="up-down-vote-sec">
    <a class="up vote_buttoon"><i class="fa fa-thumbs-up" aria-hidden="true"></i></a>
    <a class="down vote_buttoon"><i class="fa fa-thumbs-down" aria-hidden="true"></i></a>
    <div class="rating"> 0 points</div>
  </div>
</div>

Upvotes: 1

connexo
connexo

Reputation: 56763

Just to show that this can very easily be handled by vanilla Javascript, here's how I'd solve this:

// the native version of $(document).ready()
document.addEventListener('DOMContentLoaded', function() {
  // add a so-called delegate listener on the parent element
  document.querySelector('.up-down-vote-sec').addEventListener('click', function(event) {
    switch (true) {
      // if thumbs up was clicked on
      case event.target.matches('.fa-thumbs-up'):
        event.target.style.color = 'blue';
        break;
      // if thumbs down was clicked on
      case event.target.matches('.fa-thumbs-down'):
        event.target.style.color = 'red';
        break;
      // something else was clicked, nothing to do here
      default:
    }
    event.target.classList.add('active_vote');
  });
});
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="mitem1" class="makemoney">
  <h2 class="title"><b>Item 1</b></h2>
  <p>The “<a href="https://en.wikipedia.org/wiki/Disney_Vault" target="_blank" rel="noopener noreferrer">ABC</a>” XXX</p>
  <p>XXX</p>
  <p>XXX</p>
  <p>XXX</p>
  <p>XXX</p>
  <p>XXX</p>
  <div class="up-down-vote-sec">
    <a class="up vote_buttoon"><i class="fa fa-thumbs-up" aria-hidden="true"></i></a>
    <a class="down vote_buttoon"><i class="fa fa-thumbs-down" aria-hidden="true"></i></a>
    <div class="rating"> 0 points</div>
  </div>
</div>

If anything remains unclear, leave a comment.

Upvotes: 0

Fran&#231;ois Hupp&#233;
Fran&#231;ois Hupp&#233;

Reputation: 2116

I added a line for the red color of the thumbs-down icon. Correct me if I am wrong but it seems to be working already: 

$(document).ready(function() {
	$(".vote_buttoon").click(function(){
		$(this).addClass('active_vote');
		$('.active_vote .fa-thumbs-up').css("color", "blue");
		$('.active_vote .fa-thumbs-down').css("color", "red");
	});
});
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="mitem1" class="makemoney">
	<h2 class="title"><b>Item 1</b></h2>
	<p>The “<a href="https://en.wikipedia.org/wiki/Disney_Vault" target="_blank" rel="noopener noreferrer">ABC</a>” XXX</p>
	<p>XXX</p>
	<p>XXX</p>
	<p>XXX</p>
	<p>XXX</p>
	<p>XXX</p>
	<div class="up-down-vote-sec">
		<a class="up vote_buttoon"><i class="fa fa-thumbs-up" aria-hidden="true"></i></a>
		<a class="down vote_buttoon"><i class="fa fa-thumbs-down" aria-hidden="true"></i></a>
		<div class="rating"> 0 points</div>											
	</div>
</div>

Upvotes: 0

Related Questions