使用jquery更改文本和类

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

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

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

我的问题是关于JQuery，我似乎无法弄明白如何制作它当点击“Like post”时，它被改为“已经喜欢”而“已经不喜欢”改为“不喜欢”

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：

 
 
  Like Post   
 
  No Good  
  

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应该适合您所需要的。 我试图优化你的代码，但我希望它仍然可以正常工作。

Answer 2

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

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

 .hide { display: none; } 
 
  Like Post Already liked  
 
  No Good Already disliked  
 
 $('.updates').click(function () { $(this).find('i').toggleClass('fa-thumbs-up fa-thumbs-down') .find('span').toggleClass('hide'); });