Ruby on Rails像圖片而不是文字的按鈕

我目前正在使用Ruby中的Acts_As_Votable gem來在每篇帖子上使用Like鏈接，以便用戶可以投票。我在這裏找到了一個很好的答案，這有助於做到這一點，但我試圖找出如何使用心臟圖標圖像而不是喜歡/不喜歡的文本。我希望圖像更新而不刷新，就像文本鏈接一樣，但無法弄清楚邏輯。下面是當前的代碼我使用：Ruby on Rails像圖片而不是文字的按鈕

控制器/ prides_controller.rb

def like 
    @pride = Pride.find(params[:id]) 
    @pride.liked_by current_user 

    if request.xhr? 
     render json: { count: @pride.get_likes.size, id: params[:id] } 
    else 
     redirect_to @pride 
    end 
end 

def dislike 
    @pride = Pride.find(params[:id]) 
    @pride.disliked_by current_user 
    if request.xhr? 
     render json: { count: @pride.get_likes.size, id: params[:id] } 
    else 
     redirect_to @pride 
    end 
end

驕傲/ show.html.erb

<div class="single-heart-this"> 
    <% if current_user.liked? @pride %> 

     <span class="heart-icon-loved"> 
     <%= link_to "Dislike", dislike_pride_path(@pride), class: 'vote', method: :put, remote: true, data: { toggle_text: 'Like', toggle_href: like_pride_path(@pride), id: @pride.id } %></span> 
    <% else %> 
    <span class="heart-icon"> 
     <%= link_to "Like", like_pride_path(@pride), class: 'vote', method: :put, remote: true, data: { toggle_text: 'Dislike', toggle_href: dislike_pride_path(@pride), id: @pride.id } %></span> 
    <% end %> 
    <span class="heart-no" data-id="<%= @pride.id %>"><%= @pride.get_likes.size %></span> 
<% end %>  
</div>

的JavaScript/pride.js。 erb

# Rails creates this event, when the link_to(remote: true) 
# successfully executes 
$(document).on 'ajax:success', 'a.vote', (status,data,xhr)-> 
    # the `data` parameter is the decoded JSON object 
    $(".heart-no[data-id=#{data.id}]").text data.count 
    return

的JavaScript/prides.js.coffee

# Place all the behaviors and hooks related to the matching controller here. 
# All this logic will automatically be available in application.js. 
# You can use CoffeeScript in this file: http://coffeescript.org/ 
$(document).on 'ajax:success', 'a.vote', (status,data,xhr)-> 
    # update counter 
    $(".heart-no[data-id=#{data.id}]").text data.count 

    # toggle links 
    $("a.vote[data-id=#{data.id}]").each -> 
    $a = $(this) 
    href = $a.attr 'href' 
    text = '$a.text()' 
    $a.text($a.data('toggle-text')).attr 'href', $a.data('toggle-href') 
    $a.data('toggle-text', 'text').data 'toggle-href', href 
    return 

    return

感謝您的幫助。

來源

2014-08-30 Derrick Lamers

試試這個嗎？

地址：類：「Change_me」你的鏈接

<%= link_to image_tag("Dislike.png"), dislike_pride_path(@pride), class: 'vote', method: :put, remote: true, data: { toggle_href: like_pride_path(@pride), id: @pride.id }, class: "change_me" %>

SRC（「change_me」）link_to image_tag with inner text or html in rails

在你的CoffeeScript，改變圖像的src

$ ATTR「。 src'，'/like.png'

src：Rails 3.1 CoffeeScript/JQuery - How to change the source of an image in a div?

來源

2014-08-30 14:31:19 pigate

該部分使但我很困惑如何使圖像在點擊時自動改變，而用戶不必刷新頁面。現在，如果用戶點擊「喜歡」文本，類似的東西被計數，文本自動變成「不喜歡」，反之亦然。 – 2014-08-30 14:33:54

Ruby on Rails像圖片而不是文字的按鈕

回答

相關問題