JQuery Toggle / Class Change

Question

我有一个特别的问题，我已经坚持了大约一天，并且非常感谢任何方向。

这是我目前的JFiddle：http://jsfiddle.net/T9wvL/2/

我需要的功能非常简单： 差不多，每一方都有两种选择。在左边：“喜欢邮报”或“已经喜欢”。 在右边：“不好”或“已经不喜欢。”

我需要它，所以当点击“喜欢Post”时，我需要将它切换为“已经喜欢”。当Already Liked被打开时，我也需要“No Good”才能成为正确的选择，当点击“No Good”时，我需要将其切换为“已经不喜欢”，同时切换“已经喜欢”回到左边的“Like Post”，反之亦然。

在目前的Jfiddle中我有我目前的设置，我愿意接受任何建议。 Html需要几乎保持相同的ID，因为它们对于一些不同的功能很重要。

这是课程：

"Like Post" = fa fa-thumbs-up like_btn
"Dislike Post" = fa fa-thumbs-down dislike_btn
"Already Liked" = fa fa-check like_btn
"Already Disliked" = fa fa-check fa-check-dislike dislike_btn"

此外，这是应用程序的视觉效果：

Answer 1

我已将以下内容添加到您的JavaScript中：

$('.updates-like').click(function () {
    $(this).find("i").removeClass("fa-thumbs-up").addClass("fa-check").parent().find("span").text("Already liked");
    $(".updates-dislike i").removeClass("fa-check").addClass("fa-thumbs-down").parent().find("span").text("No Good");
});

$('.updates-dislike').click(function () {
    $(this).find("i").removeClass("fa-thumbs-down").addClass("fa-check").parent().find("span").text("Already disliked");
    $(".updates-like i").removeClass("fa-check").addClass("fa-thumbs-up").parent().find("span").text("Like Post");
});

Updated JSFiddle