如何动态更改段落中定义的字体拇指的颜色



在ASP.NET MVC部分视图中,我在一段中定义了两个拇指。

当我悬停时,CSS(font真棒(会将颜色更改为蓝色。

基于if语句的真实性,我想改变拇指的颜色。这个想法是,如果用户之前点击了"喜欢"或"不喜欢"拇指,我希望下次选择(拇指(时用绿色表示。这表明他们已经喜欢或不喜欢它。

根据我在段落中显示拇指的方式,我如何动态更改拇指的颜色?

@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 )
{
// Show by color that it was previously liked.
// Does not work.
$(".blogLike").color('green');
}
}
function SetDisLike(disabledSwitch) {
$(".blogDisLike").attr('disabled', disabledSwitch);
if (disabledSwitch == false)
{
// Show by color that it was previously liked.
// Does not work.
$(".blogDisLike").color('green');
}
}
});
</script>
$(".blogDisLike").css('color', 'green');

最新更新