javascript - 使用 jquery 更改文本和类

Question

我一整天都专注于我正在从事的项目。所有功能都在那里，我只是在使用 jquery 时遇到了问题，有人可以帮助我吗？

这是应用程序的视觉效果:

非常简单，当我点击“喜欢帖子”时，会通过ajax调用一个函数来更新数据库上的计数，当我按“不喜欢”时也是如此

我的问题是 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:http://jsfiddle.net/T9wvL/2/

Answer 1

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

http://jsfiddle.net/isherwood/T9wvL/8

.hide {
    display: none;
}

<article>
    <div class="updates updates-like">
        <i class="fa fa-thumbs-up like_btn" id="like"> 
            <span>Like Post</span>
            <span class="hide">Already liked</span>
        </i> 
    </div>

    <div class="updates updates-dislike">
        <i class="fa fa-thumbs-down dislike_btn" id="dislike">
            <span>No Good</span>
            <span class="hide">Already disliked</span>
        </i>
    </div>
</article>

$('.updates').click(function () {
    $(this).find('i').toggleClass('fa-thumbs-up fa-thumbs-down')
        .find('span').toggleClass('hide');
});