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

toggle button text onclick=javascript
day and night mode javascript
toggle click event in javascript
change class on click javascript
toggle night mode
dark mode javascript
javascript add remove class onclick
click to show text html

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>

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>

fontawesome+jQuery: it doesn't change the "thumb down" icon to the , the problem is that jQuery does not change the "thumb down" icon to the < button id="change_color">Change color</button> <button Here it works well -- > <i class="fa fa-thumbs-o-up"></i> <script> $(document).ready(function() You' re toggling the class "fa-thumbs-o-up" which adds it, but doesn't� Approach 2: This approach uses jQuery to change the background color after clicking the button. The text() method is used to set the text content to the selected element. The on() method is used as event handlers for the selected elements and child elements.

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>

Can't change icon color through jquery addClass() In IE8 � Issue , Can't change icon color through jquery addClass() In IE8 #2108 $('#clock- toggle').click(function(){ $(this). In IE8 when the toggle was clicked, the text ' clock' would change <div id="clock-toggle" class="gray"> clock <i class="fa fa- 2x"></i> </div> tagliala, thumbs up for your solution, it works!!! CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100

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>

Dynamic change one icon to another � Issue #447 � feathericons , How to programatically (dynamically) change icon to another? <button>Open up <i class="fa fa-angle-right"></i></button> <script> document. If you have jQuery, this seems to work: the existing Feather-generated SVG element and replace it with a new one using the Feather JS function. thumbs up 3 Definition and Usage. The click event occurs when an element is clicked. The click() method triggers the click event, or attaches a function to run when a click event occurs.

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>

How To Toggle Like and Dislike, Click on the icon to toggle between thumbs-up and thumbs-down (like/dislike): a like/dislike icon --> <i onclick="myFunction(this)" class="fa fa-thumbs-up"></i>� Using jQuery Color in Production. We release jQuery Color by itself, or in a bundle. The extended names can be included as a jQuery Color plugin, or you can download the version of jQuery Color that includes the names. Choose your build from the following list: Current version: 2.1.2. jQuery Color Compressed Uncompressed

Changing the icons onclick jQuery, I want to change the icon when I click on it, my code does not work toggling class in the complete The problem is with your jQuery code not being correct. If you want it to work with onclick="" you have to move your callback function <i onclick="myFunction(this)" class="fa fa-thumbs-up"></i> Now Jquery code for this is� This method is a shortcut for .on( "click", handler ) in the first two variations, and .trigger( "click" ) in the third. The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event. For example, consider the HTML:

5 Use Cases for Icon Fonts, Tim Pietrusky shares some ideas on how to use icon fonts as well as Tim knows this site has long been a proponent of using fonts for to 360deg ), scales up and down a little bit, and changes the color. you can visit the CodePen demo links provided and click the word 4. Emocons.js jQuery Plugin. Click on "Advanced" tab and make sure the "Advanced printing features" are enabled. Now try to print. If the issue persists, go to the next step. 2) Go to Control panel - Programs and features - Locate Microsoft office package - Right-click and select "Change" option. You will get an MS Office pop-up window.

How to validate input field while focusout ?, background-color:#fffa86;. } label {. color:brown; content:"< i style = 'color:green ;' class = 'fas fa-thumbs-up' ></ i >" $('div input').focusout(function() { scroll to change number in <input type="number"> field using JavaScript/jQuery? How to get position of an element relative to the document or parent using jQuery ? Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! All-New SVG Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle.