Within an ASP.NET MVC partial view, I've defined 2 thumbs within a paragraph.
The CSS (fontawesome) will change the color to blue upon hovering.
I am seeking a way to dynamically change the color of the thumbs based on certain conditions. Specifically, if the User has previously clicked the Like or Dislike thumb, I want that selection indicated by the color green the next time around. This visual cue helps in showing that they have already liked or disliked it.
How can I achieve this dynamic color change for the thumbs displayed within the paragraph?
@model GbngWebClient.Models.LikeOrDislikeVM
<style>
.fa {
cursor: pointer;
user-select: none;
}
.fa:hover {
color: blue;
}
.my-size {
font-size: 20px;
}
</style>
<div class="row">
<p><span class="blogLike my-size fa fa-thumbs-up"></span><span class="my-size"> :
@Model.LikeCount</span> <span class="my-size"> | </span><span class="blogDisLike my-size fa fa-
thumbs-down"></span><span class="my-size"> : @Model.DisLikeCount</span></p>
</div>
@Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
$(document).ready(function () {
SetLike('@Model.LikeDisabled');
SetDisLike('@Model.DisLikeDisabled');
function SetLike(disabledSwitch) {
$(".blogLike").attr('disabled', disabledSwitch);
if (disabledSwitch == false )
{
// Indicate previous 'like' with green color.
// This statement does not work.
$(".blogLike").color('green');
}
}
function SetDisLike(disabledSwitch) {
$(".blogDisLike").attr('disabled', disabledSwitch);
if (disabledSwitch == false)
{
// Indicate previous 'dislike' with green color.
// This line does not work.
$(".blogDisLike").color('green');
}
}
});
</script>