Javascript jQuery中的喜欢/不喜欢按钮系统

我想有一个喜欢和不喜欢按钮，当其中一个按钮被点击时，它将改变颜色为红色。但当我同时点击这两个图标时，喜欢和不喜欢的图标都变成了红色。我只希望它们中的一个在任何时候都是红色的，而不是两个都是。我怎么修理它

我想知道是否可以通过在Jquery或toggle中使用CSS和.hasClass、.removeClass和.addClass来缩短代码

下面是我编写的jQuery代码：

$('#Like').on({
'click': function() {
    if($('#Like').attr('src') == 'images/Like.png') {
        $('#Like').attr('src','images/Liked.png');
        $('#Dislike').attr('src') == 'images/Dislike.png');
    }
    else {
        $('#Like').attr('src','images/Like.png');
    }
}
});

$('#Dislike').on({
'click': function() {
    if($('#Dislike').attr('src') == 'images/Dislike.png') {
        $('#Dislike').attr('src','images/Disliked.png');
        $('#heartLike').attr('src') == 'images/Like.png');
    }
    else {
        $('#Dislike').attr('src','images/Dislike.png');
    }
}
});

在这里，“喜欢”和“不喜欢”是最初的“喜欢”和“不喜欢”图标

---

Like.png和Dislike.png是没有颜色的图像，Like.png和Dislike.png是用红色填充的图像。

您应该使用公共类绑定单击处理程序，特定类，即状态的

Like

和

Dislike

CSS类，我还建议您使用CSS规则显示

图标

。下面是一个通用示例

$('#Like').on({
'click': function() {
    if($('#Like').attr('src') == 'images/Like.png') {
        $('#Like').attr('src','images/Liked.png');
        $('#Dislike').attr('src','images/Dislike.png');
    }
    else {
        $('#Like').attr('src','images/Like.png');
    }
}
});

$('#Dislike').on({
'click': function() {
    if($('#Dislike').attr('src') == 'images/Dislike.png') {
        $('#Dislike').attr('src','images/Disliked.png');
        $('#heartLike').attr('src','images/Like.png');
    }
    else {
        $('#Dislike').attr('src','images/Dislike.png');
    }
}
});

$（'span.common'）。在（'click'，function（）上{
$（this.toggleClass（'喜欢不喜欢'）
});
.like{
背景颜色：绿色
}
.不喜欢{
背景颜色：红色
}

罗兰


ipsum
试试这个，您在代码中使用了不同的id作为like按钮。单击“不喜欢”，您正在更改heartLike的url，将此更改为“喜欢”

$('#Like').on({'click': function() {
if($('#Like').attr('src') == 'images/Like.png') {
    $('#Like').attr('src','images/Liked.png');
    $('#Dislike').attr('src') == 'images/Dislike.png');
}
else {
    $('#Like').attr('src','images/Like.png');
}
 }
});

$('#Dislike').on({'click': function() {
if($('#Dislike').attr('src') == 'images/Dislike.png') {
    $('#Dislike').attr('src','images/Disliked.png');
    $('#Like').attr('src') == 'images/Like.png');
}
else {
    $('#Dislike').attr('src','images/Dislike.png');
}
 }
});

祝您好运：）
当收到答案时，请不要用该答案更新您的问题。这样做的结果是一个问题，声称与工作代码有问题，并回答了没有意义的问题。