Ruby on Rails Like 按钮，带有图像而不是文本

Question

我目前正在使用 Ruby 中的 Acts_As_Votable gem 在我的每个帖子上使用 Like 链接，以便用户可以投票。我在这里找到了一个很好的答案，有助于做到这一点，但我试图弄清楚如何使用心形图标图像而不是喜欢/不喜欢文本。我希望图像在不刷新的情况下更新，就像文本链接一样，但无法弄清楚逻辑。这是我正在使用的当前代码：

controllers/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

感谢您的帮助。

Answer 1

试试这个？

在您的链接中添加：class: "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" %>

源代码：link_to image_tag with inner text or html in rails

在您的咖啡脚本中，更改图像 src

$(".change_me").attr 'src', '/like.png'

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