使用jquery更改文本和类 [英] Changing text and class with jquery

问题描述

我整天都被困在一个正在研究的项目上。所有的功能都存在，我只是遇到了jquery的问题，有人可以帮助我吗？

I've been stuck all day on a project I'm working on. All funcitonality is there, I'm just having trouble with the jquery, can someone help me out?

这里是应用程序的视觉效果：

here is a visual of the application:

非常简单，当我点击喜欢帖子时，通过ajax调用一个函数来运行对数据库计数的更新，当我按Dislike时也是一样

Pretty simple, when I click "like post" a function is called via ajax to run a update to the count on the database, also the same when I press "Dislike"

我的问题在于JQuery，我似乎无法弄清楚如何制作它当点击Like post时，它会改为已经喜欢和已经不喜欢改为不喜欢

My problem is with the JQuery, I can't seem to figure out how to make it so when "Like post" is clicked, it is changed to "Already Liked" and the "Already Disliked" changed to "Dislike"

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，我试过了一些不同的东西但似乎没有任何效果，我非常感谢任何建议。

Here is the current JQuery, I've tried a few different things but nothing seems to be working, any suggestions I greatly appreciate.

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

UPDATED JFIDDLE： http://jsfiddle.net/T9wvL/2/

UPDATED JFIDDLE: http://jsfiddle.net/T9wvL/2/

推荐答案

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>

JQuery：

$('.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;

});

这是 JSFiddle 应该适合您的需要。我尝试优化你的代码，但我希望它仍能正常工作。

Here is the JSFiddle that should work for what you need. I tried to optimize a little bit your code, but I hope it still works fine.

这篇关于使用jquery更改文本和类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！