我已经对我元素中的帖子进行了投票。
它工作正常,但我遇到了点击时 fa-thumbs-up 图标颜色变化的问题。
下面是我的代码。
$(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>
但是我有一个颜色问题,比如 fa fa-thumbs-up 的正常颜色是黑色,但是当用户点击 fa fa-thumbs-up 它会改变颜色,比如蓝色,或者如果用户点击 fa fa-thumbs -向下它会改变颜色,如红色。
但它不起作用。
谁能帮我解决这个问题。
最佳答案
您可以简单地使用 toggle class
并应用 css
进行颜色更改,并且 up 和 down 两者不应一起点击
$(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>
关于jquery - 我在单击事件时使用 jquery 更改 fa-thumbs-up 图标颜色时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58689264/