【问题标题】:Ruby on Rails Like Button with Image no textRuby on Rails Like Button with Image no text
【发布时间】:2014-10-22 22:24:45
【问题描述】:

我正在使用acts_as_votable gem 为我的帖子添加一个Like 按钮。我按照我在以下 StackOverflow 问题中找到的说明进行操作:

Like button Ajax in Ruby on Rails

代码运行良好,但我宁愿使用图片而不是文本链接。基本上我正在尝试使用基于喜欢或不喜欢使用以下代码的现有设计模板:

喜欢

<span class="heart-icon" style="background-position: 0px -290px;" id="<%= @pride.id %>"></span>

不喜欢

<span class="heart-icon" style="background-position: 0px -256px;" data-id="<%= @pride.id %>"></span>

我尝试在 link_to 上使用 do,它可以工作,但也应用了我认为来自 JS 文件的文本覆盖。我在这里搜索了很多问题,但似乎找不到适合我情况的问题。我希望社区中的某个人能够帮助我。

这是我目前的设置方式:

我的观点是这样的:

<% if current_user.liked? @content %>
 <%= link_to "Dislike", dislike_content_path(@content), class: 'vote', method: :put, remote: true, data: { toggle_text: 'Like', toggle_href: like_content_path(@content), id: @content.id } %>
<% else %>
 <%= link_to "Like", like_content_path(@content), class: 'vote', method: :put, remote: true, data: { toggle_text: 'Dislike', toggle_href: dislike_content_path(@content), id: @content.id } %>
<% end %>

我的 CoffeeScript 如下所示:

$(document).on 'ajax:success', 'a.vote', (status,data,xhr)->
# update counter
$(".votes-count[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

这就是我希望我的视图配置的方式,但它一直在图像上写下喜欢/不喜欢的文本,我不知道在哪里更改它。

<% if current_user.liked? @content %>
    <%= link_to "Dislike", dislike_content_path(@content), class: 'vote', method: :put, remote: true, data: { toggle_text: 'Like', toggle_href: like_content_path(@content), id: @content.id } do %>
        <span class="heart-icon" style="background-position: 0px -290px;" id="<%= @content.id %>"></span>
    <% end %>
<% else %>
    <%= link_to "Like", like_content_path(@content), class: 'vote', method: :put, remote: true, data: { toggle_text: 'Dislike', toggle_href: dislike_content_path(@content), id: @content.id } do %>
        <span class="heart-icon" style="background-position: 0px -256px;" data-id="<%= @content.id %>"></span>
    <% end %>
<% end %>

【问题讨论】:

  • 您的问题不清楚,我可以提供帮助,但需要更多详细信息,您能否准确发布错误或记录或向我们展示有关错误的图像....顺便说一下,如果您正在尝试显示图像而不是链接尝试根据 0,:size=>"14x14"), dislike_content_path(@content), class: 'vote', method: :put %>
  • 基本上我在每个帖子上都有一个喜欢/不喜欢的心脏图像,当用户点击心脏时,图像从灰色变为红色并且计数器值增加。这一切都发生在没有页面刷新的情况下。我使用了上面的文章,它效果很好,但用于更新 link_to 上的文本而不是图像。我将编辑问题,使其更有意义。

标签: ajax ruby-on-rails-4 coffeescript


【解决方案1】:

我在 GitHub 上找到了这个很棒的存储库,它帮助了我。特别感谢作者。

https://github.com/shihabullal/soquestion6482354

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-06-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-04-24
    相关资源
    最近更新 更多