如何建立喜欢按钮？

Question

很抱歉，如果这个问题很基本，很遗憾，除了JS和前端开发方面的经验之外，我什么都没有。 我要完成的工作是构建一个非常简单的like按钮（ala facebook），按下该按钮后会发生变化，因此，如果我单击按钮就像按钮转变为“不喜欢”一样，如果我单击不喜欢，按钮就会转变为“喜欢”。 我正在使用Rails（4.0）和JQuery。

我现在所拥有的是一个可以在后端正常工作的按钮，但是在前端却无法正常工作，即它无法正确地从“喜欢”变为“不喜欢”或从“不喜欢”变为“喜欢”。

这是包含两个按钮的部分：

<div class="like-button">
  <% if current_user && current_user.liked?( object ) %>
    <%= link_to unlike_path( object ), method: :delete, remote: true, id: "like_button-#{ object.id }", class: 'like-button' do %>
      <span class="icon"></span>
      <span class="label m3">Non mi Piace</span>
    <% end %>
  <% else %>
    <%= link_to like_path( object ), method: :post, remote: true, id: "like_button-#{ object.id }", class: 'like-button' do %>
      <span class="icon"></span>
      <span class="label m3">Mi Piace</span>
    <% end %>
  <% end %>
</div>

一切正常，我知道这是因为，如果我重新加载页面并显示正确的按钮，它将正确检查按钮的状态。 不幸的是，我对JS不太确定（也是因为到目前为止，我对前端问题的了解很少...）：

$(".like-button").on("click", function () {
  $("#like_button_container").html("<%= render partial: 'shared/like', locals: { object: @likable } %>");
} );

我究竟做错了什么？ 我试图将包含整个内容的div的类更改为id like_button_container，但它仍然无法正常工作。

有人可以照亮吗？

TIA

Answer 1

您可以使用jQuery来实现。

这是HTML

<input type="button" class="like"  value="like">

<input type="button" class="unlike" style="display:none;" value="unlike">


<script>
$(function(){
$(".like").click(function(){

  $(this).hide()
$(".unlike").show()


});
$(".unlike").click(function(){

  $(this).hide()
$(".like").show()
//you can keep you logic here 
//you can make server side increment of the likes/unlike using jquery ajax post or
//any login you want to put

})

});

</script>