1
Answer

How to dynamically changing the color of a fontawesome thumb

First Last

First Last
4y
901
1
In an aps.net mvc partial view, I have 2 thumbs defined in a paragraph.
The CSS (fontawesome) will change the color to blue when I hover.
Based upon an if statement truth, I want to change the color of the thumbs. The idea being that if the User had previously clicked the Like or Dislike thumb, I want that selection (the thumb) indicated by the color green the next time in. It shows that they already like or disliked it.
How do I dynamically change the color of the thumbs given the way I display them in a paragraph?
  
  1. @model GbngWebClient.Models.LikeOrDislikeVM  
  2.   
  3.     <style>  
  4.         .fa {  
  5.            cursor: pointer;  
  6.            user-select: none;  
  7.         }  
  8.   
  9.        .fa:hover {  
  10.            color: blue;  
  11.        }  
  12.   
  13.       .my-size {  
  14.           font-size: 20px;  
  15.        }  
  16.     </style>  
  17.   
  18.     <div class="row">  
  19.     <p><span class="blogLike my-size fa fa-thumbs-up"></span><span class="my-size"> :   
  20.     @Model.LikeCount</span> <span class="my-size"> | </span><span class="blogDisLike my-size fa fa-   
  21.     thumbs-down"></span><span class="my-size"> : @Model.DisLikeCount</span></p>  
  22.     </div>  
  23.   
  24.     @Scripts.Render("~/bundles/jquery")  
  25.   
  26.     <script type="text/javascript">  
  27.        $(document).ready(function () {  
  28.          SetLike('@Model.LikeDisabled');  
  29.          SetDisLike('@Model.DisLikeDisabled');  
  30.   
  31.         function SetLike(disabledSwitch) {  
  32.             $(".blogLike").attr('disabled', disabledSwitch);  
  33.   
  34.             if (disabledSwitch == false )  
  35.             {  
  36.                 // Show by color that it was previously liked.  
  37.   
  38.                 // Does not work.  
  39.                 $(".blogLike").color('green');  
  40.             }  
  41.         }  
  42.   
  43.         function SetDisLike(disabledSwitch) {  
  44.             $(".blogDisLike").attr('disabled', disabledSwitch);  
  45.   
  46.             if (disabledSwitch == false)  
  47.             {  
  48.                 // Show by color that it was previously liked.  
  49.   
  50.                 // Does not work.  
  51.                 $(".blogDisLike").color('green');  
  52.             }  
  53.         }  
  54.     });  
  55.     </script>  
Answers (1)
Next Recommended Forum