Question

如果这个问题非常基本，我很抱歉，不幸的是，除了JS和前端开发以外，我都是经验丰富的。我想要完成的是构建一个非常简单的按钮（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>

如何构建类似按钮？

1 个答案: