Question

我正在尝试使用Ajax在Rails中执行Like按钮，例如：Like button Ajax in Ruby on Rails

通过上面的例子，它可以很好地工作，但我想了解如何使用图像和标志性文本（如fontawesome）而不是文本喜欢/不喜欢这样做。有没有参考？

这是我用于标志性文字的代码（我不知道如何更改图像）。

查看代码：

if current_user.liked? content
    link_to fa_icon("some-symbol"), dislike_movie_path(content), 
                            class: 'vote', 
                            method: :put, 
                            remote: true, 
                            data: { toggle_text: 'another-symbol', 
                                    toggle_href: like_movie_path(content), 
                                    id: content.id }
  else
    link_to fa_icon("another-symbol"), like_movie_path(content), 
                            class: 'vote', 
                            method: :put, 
                            remote: true, 
                            data: { toggle_text: 'some-symbol', 
                                    toggle_href: dislike_movie_path(content), 
                                    id: content.id }
  end

javascript代码：

$(document).on 'ajax:success', 'a.vote', (status,data,xhr)->
  $(".votes-count[data-id=#{data.id}]").text data.count

  $("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
    $i = $a.get("i")
    if($i.hasClass('some-symbol'))
      $i.removeClass('some-symbol').addClass('another-symbol')
    else
      $i.removeClass('another-symbol').addClass('some-symbol')
    return
  return

感谢您的帮助。

Answer 1

这就是我要做的事情：

-

<强>结构

#config/routes.rb
resources :movies do
   put :vote #-> domain.com/movies/:movie_id/vote
end

#app/controllers/movies_controller.rb
class MoviesController < ApplicationController
   respond_to :js, :json, :html

   def vote
      @movie = Movie.find params[:movie_id]

      vote = current_user.votes.find _or_create_by movie_id: params[:movie_id]
      vote.toggle(:vote)

      respond_with vote
   end
end

-

<强>功能

这将使您能够使用以下内容：

#app/views/movies/show.html.haml
= link_to fa_icon("some-symbol"), movie_vote_path(content), class: 'vote',  method: :put, remote: true, data: { id: content.id }

在我看来，这个技巧将把你想要的样式放到CSS中 - 让你专注于改变它。链接将保持不变 - 这意味着您可以通过确定返回时给出的值来决定是否投票：

#app/assets/javascripts/application.js.coffee
$(document).on 'ajax:success', 'a.vote', (status, data ,xhr)->
  $(".votes-count[data-id=#{data.movie_id}]").text data.count

  $("a.vote[data-id=#{data.movie_id}]").each ->
     if data.movie_id is "1"
        $(this).addClass "up"
     else
        $(this).addClass "down"
  return

#app/assets/stylesheets/application.css.sass
.vote
   & .up
     #styling for upvote

   & .down
     #styling for downvote

像Ruby on Rails中的按钮Ajax - 如何更改图像和标志性文本

1 个答案: