通过一次点击更新ajax-request中的2个变量(Rails)

Question

我向服务器发出一个ajax请求，服务器用JSON响应我。

我的js.file在成功的时候：

success: function(data){
   //was disliked
   if ($(_this).hasClass( "disliked" )){
   $(_this).removeClass("disliked").addClass("liked");
   dislike_action.text(data.post_dislikes);
   $(_this).text(data.post_likes);
 }

我来自控制器的响应：

render json: { post_likes: @post.likes_count, post_dislikes: @post.dislikes_count }

问题是，它只改变了post_dislike：

        $(_this).text(data.post_likes);

但不是两者都有：

dislike_action.text(data.post_dislikes);
$(_this).text(data.post_likes);

要查看post_dislikes的更改，我必须重新加载页面，那么问题出在哪里呢？

下面是我的完整js文件：

var dislike_action = $(".dislike_action");
var like_action = $(".like_action");

$(function(){  
  var dislikes_count = $(".dislikeAction").text();
  var likes_count = $(".likeAction").text();
  $(".likeAction").click(function(){
      var current_post_tr = $(this).parents('tr')[0];
      var _this = this
      $.ajax({
      url: 'http://localhost:3000/dashboard/' + $(current_post_tr).attr('data-post_id') +'/like',
        type: 'PUT',
        success: function(data){
          //was disliked
          if ($(_this).hasClass( "disliked" )){
            $(_this).removeClass("disliked").addClass("liked");
            dislike_action.hide();
            $(_this).text(data.post_likes);
          }//was neither liked nor disliked
          else {           
            $(_this).addClass("liked").text(data.post_likes);
          }
        },
        error: function(data){
          alert(data.responseText);
          console.log(data); 
        }
      });
    });

  $(".dislikeAction").click(function(){
      var current_post_tr = $(this).parents('tr')[0];
      var _this = this
      $.ajax({
      url: 'http://localhost:3000/dashboard/' + $(current_post_tr).attr('data-post_id') +'/dislike',
        type: 'PUT',
        success: function(data){
          //was liked
          if ($(_this).hasClass( "liked" )){
            $(_this).removeClass("liked").addClass("disliked");
            like_action.text(data.post_likes);
            $(_this).text(data.post_dislikes);
          }//was neither liked nor disliked
          else {           
            $(_this).addClass("disliked").text(data.post_dislikes);
          }
        },
        error: function(data){
          alert(data.responseText); 
          console.log(data);
        }
      });
    });

});

Answer 1

如果看不到你的html，我就不能确定，但看起来你的问题可能是因为每个喜欢和不喜欢有两个不同的类。

您在顶部声明了这一点

var dislike_action = $(".dislike_action");
var like_action = $(".like_action");

但是后来

$(".dislikeAction")和$(".likeAction")在其他地方使用

我想如果你把上面的声明改成这个...

var dislike_action = $(".dislikeAction");
var like_action = $(".likeAction");

它可能会起作用