Javascript 使用jquery更改文本和类

我整天都在忙一个项目。所有的功能都在那里，我只是在jquery上遇到了麻烦，有人能帮我吗

以下是该应用程序的可视化视图：

非常简单，当我单击“likepost”时，会通过ajax调用一个函数来运行数据库计数的更新，当我按下“Dislike”时也是如此

我的问题是JQuery，当点击“喜欢的帖子”时，我似乎不知道如何做到这一点，它被改为“已经喜欢”，而“已经不喜欢”被改为“不喜欢”

CSS类：

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

这是当前的JQuery，我尝试了一些不同的方法，但似乎没有任何效果，任何建议我都非常感谢

$('.fa-thumbs-up').click(function() {

var annid = $(this).attr('id');
update_likes(annid, 'like');
//code goes here
});

$('.fa-thumbs-down').click(function() {

var annid = $(this).attr('id');
update_likes(annid, 'dislike');
//code goes here
});

---

更新的JFIDDLE:

切换元素比交换文本更容易，所以我稍微修改了HTML

.hide{
显示：无；
}
喜欢的职位
已经喜欢
无益
已经不喜欢
$（'.updates'）。单击（函数（）{
$（this.find（'i'）.toggleClass（'fa-thumbs-up-fa-thumbs-down'））
.find（'span'）.toggleClass（'hide'）；
});

HTML:

<article>
    <div class="updates-like">
        <i class="fa fa-thumbs-up like_btn" id="<? echo $update->annid; ?>">
            <span>Like Post </span>
        </i> 
    </div>
    <div class="updates-dislike">
        <i class="fa fa-thumbs-down dislike_btn" id="<?echo $update->annid;?>">
            <span>No Good</span>
        </i> 
    </div>
</article>

$('.like_btn').click(function () {
    /*This here runs the update function on the DB.. Not Important
       var annid = $(this).attr('id');
       update_likes(annid, 'like');*/

        //Code here to change "Like Post" to "already Liked" ON CLICK, and to change "already disliked" back to "No Good"

    if ( $(this).hasClass('fa-thumbs-up') ) {
        $(this).removeClass('fa-thumbs-up')
               .addClass('fa-check')
               .find('span')
               .text('Already Liked');
        if ( $('.dislike_btn').hasClass('fa-check fa-check-dislike') ) {
            $('.dislike_btn').removeClass('fa-check fa-check-dislike')
                             .addClass('fa-thumbs-down')
                             .find('span')
                             .text('No Good');
        }
    }

    return true;

});

$('.dislike_btn').click(function () {
    /*This here runs the update function on the DB.. Not Important
        var annid = $(this).attr('id');
        update_likes(annid, 'dislike'); */

        //Code here to change "No Good" to "already disliked" ON CLICK, and to change "already Liked" back to "No Like Post"

    if ( $(this).hasClass('fa-thumbs-down') ) {
        $(this).removeClass('fa-thumbs-down')
               .addClass('fa-check fa-check-dislike')
               .find('span')
               .text('Already Disliked');
        if ( $('.like_btn').hasClass('fa-check') ) {
            $('.like_btn').removeClass('fa-check')
                          .addClass('fa-thumbs-up')
                          .find('span')
                          .text('Like Post');
        }
    }

    return true;

});

---

这是你需要的。我尝试过对您的代码进行一点优化，但我希望它仍然可以正常工作。

您能否在不知道标记（html）的情况下创建一个JSFIDLE，这很难提供帮助。您能解释一下您尝试了什么吗？因为这可能会指出问题所在。我为缺乏具体性而道歉，我整理了一些小提琴，希望能多解释一下我的问题，谢谢！使用logic fix再次更新。感谢isherwood提供的替代方法。我在路上，我会稍微多做点调整，我真的很感激。唯一的问题是当喜欢被切换到“已经喜欢”时，另一个需要被抵消。所以，当“已经喜欢”打开时，“不好”需要打开，反之亦然。这正是我需要的，谢谢！

$('.like_btn').click(function () {
    /*This here runs the update function on the DB.. Not Important
       var annid = $(this).attr('id');
       update_likes(annid, 'like');*/

        //Code here to change "Like Post" to "already Liked" ON CLICK, and to change "already disliked" back to "No Good"

    if ( $(this).hasClass('fa-thumbs-up') ) {
        $(this).removeClass('fa-thumbs-up')
               .addClass('fa-check')
               .find('span')
               .text('Already Liked');
        if ( $('.dislike_btn').hasClass('fa-check fa-check-dislike') ) {
            $('.dislike_btn').removeClass('fa-check fa-check-dislike')
                             .addClass('fa-thumbs-down')
                             .find('span')
                             .text('No Good');
        }
    }

    return true;

});

$('.dislike_btn').click(function () {
    /*This here runs the update function on the DB.. Not Important
        var annid = $(this).attr('id');
        update_likes(annid, 'dislike'); */

        //Code here to change "No Good" to "already disliked" ON CLICK, and to change "already Liked" back to "No Like Post"

    if ( $(this).hasClass('fa-thumbs-down') ) {
        $(this).removeClass('fa-thumbs-down')
               .addClass('fa-check fa-check-dislike')
               .find('span')
               .text('Already Disliked');
        if ( $('.like_btn').hasClass('fa-check') ) {
            $('.like_btn').removeClass('fa-check')
                          .addClass('fa-thumbs-up')
                          .find('span')
                          .text('Like Post');
        }
    }

    return true;

});