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

Question

我想拥有一个类似和不喜欢按钮，当单击其中一个时，它会将颜色更改为红色。但是，当我单击两者时，都喜欢和不喜欢图标是红色的。我只希望他们中的一个始终都不是红色的。我该如何修复？

我想知道我是否可以使用CSS和.hasClass，.removeclass和.addclass在jQuery或toggle中编写代码。

以下是我写过的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和#dislike是原始的类似和不喜欢的图标。

喜欢。

您应该使用通用类绑定点击处理程序，特定类别（即 like和 dislike css class for State），我还建议您使用CSS规则显示icon。这是一个通用示例

$('span.common').on('click', function() {
  $(this).toggleClass('like dislike')
});

.like {
  background-color: green
}
.dislike {
  background-color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="common like">loren</span>
<br />
<span class="common dislike">ipsum</span>

尝试一下，您在代码中使用了不同的ID进行类似按钮。不喜欢单击，您正在改变心脏的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');
}
 }
});

最佳幸运：）

$('#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');
    }
}
});