我对点击jquery事件中fa竖起大拇指图标的颜色变化有问题

Question

我已经对项目中的帖子进行了投票。

这很好用，但我有一个问题，当它点击时，fa竖起大拇指的图标会发生颜色变化。

下面是我的代码。

$(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拇指向上的颜色是黑色，但当用户点击fa fa拇指时，它会变为蓝色，或者如果用户点击fa fa拇指向下，它会变成红色。

但它不起作用。

有人能帮我做这件事吗。

Answer 1

您可以简单地使用toggle class并应用css进行颜色更改和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>

Answer 2

我为拇指向下图标的红色添加了一行。如果我错了，请纠正我，但它似乎已经起作用了：

$(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>

Answer 3

为了表明这可以很容易地由香草Javascript处理，下面是我解决这个问题的方法：

// 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>

如果还有什么不清楚的地方，请留下评论。

Answer 4

试试这个：

$(".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>