如何構建一個類似按鈕？

對不起，如果這個問題是非常基本的，不幸的是，我是一切，但通常與JS和前端開發經驗。我想要完成的是構建一個非常簡單的按鈕（ala facebook），按下它後會發生變化，所以如果我點擊按鈕過渡到「不像」，如果我點擊不同按鈕過渡到「喜歡」。我正在使用Rails（4.0）和JQuery。如何構建一個類似按鈕？

我現在所擁有的是一個在後端正常工作的按鈕，但在前端不起作用，即它不會從like轉換爲different或from different，不能正確地轉換。

這是部分包含兩個按鈕：

<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

來源

2014-01-13 ngw

'<％=渲染部分： '共享/象'，當地人：{對象：@likable}％>'只發生一次，當頁面被返回到瀏覽器。就javascript而言，它只包含頁面返回給瀏覽器時最初的值。 –

您可以使用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>

來源

2014-01-13 17:52:29 user2412511

如何構建一個類似按鈕？

回答

相關問題