Question

我试图为论坛帖子实施upvote / downvote。我编写了一些Jquery代码，当您单击向上箭头或向下箭头时它正在工作。但有两个问题：

有一个像我提到的向上箭头我从引导程序使用，然后在箭头右侧我有一个计数器，每个帖子被投票和投票多少次。有一些默认的间距，我猜是来自bootstrap。当我单击按钮时，箭头和相应的计数器编号会丢失它们的间距。但是当我刷新页面时，请恢复正常。
当用户点击向上箭头时，箭头和计数器变为绿色。当用户单击向下箭头时，向下箭头和计数器变为红色（仅对当前用户）。当我刷新或返回页面时，颜色消失并恢复正常。如何才能获得当前用户留下的已投票帖子的颜色？

_forum_post.html.erb

<div class="pull-left vote-links">         
    <%= link_to like_forum_forum_thread_forum_post_path(@forum, @forum_thread, forum_post), class: 'glyphicon glyphicon-triangle-top upvoteButton', method: :put do %>
    <%= forum_post.get_upvotes.size %>      
    <% end %><br />

    <%= link_to dislike_forum_forum_thread_forum_post_path(@forum, @forum_thread, forum_post), class: 'glyphicon glyphicon-triangle-bottom downvoteButton' , method: :put do %>
    <%= forum_post.get_downvotes.size %>
    <% end %>
  </div>

forum_posts.js

$(document).ready(function() {
$('.vote-links').on('click', 'a', function(e) {  
 e.preventDefault();   
  var currentTarget = $(e.currentTarget); 
  var voteLinksDiv = currentTarget.parents('.vote-links');

   if (currentTarget.is('.upvoteButton')) {
    currentTarget.css({color: 'green'});          
    voteLinksDiv.find('.downvoteButton').css({color: '#333'});      
   }

   else {
    currentTarget.css({color: 'red'});        
    voteLinksDiv.find('.upvoteButton').css({color: '#333'});
   }        

  $.ajax({
    url: currentTarget.attr('href'),
    type: 'PUT',        
  data: { format: 'json' },
    dataType: 'json',
    complete: function(xhr, textStatus) {        
    voteLinksDiv.find('a.upvoteButton').text(xhr.responseJSON.upvote);
    voteLinksDiv.find('a.downvoteButton').text(xhr.responseJSON.downvote);
  }
  });
 return false;
 });
});

forum_posts_controller.rb

def upvote  

@forum_post.upvote_by current_user

 respond_to do |format|
  format.html { redirect_to :back }
  format.json { render :json => { downvote: @forum_post.get_downvotes.size, upvote: @forum_post.get_upvotes.size  } }
  format.js
 end
end

def downvote
 @forum_post.downvote_by current_user

 respond_to do |format|
  format.html { redirect_to :back }
  format.json { render :json => { downvote: @forum_post.get_downvotes.size, upvote: @forum_post.get_upvotes.size  } }
  format.js
 end
end

用于upvote / downvote的AJAX

0 个答案: