从Rails的Ajax代码中删除以前的元素

问题描述

我正在尝试在“赞”按钮上应用AJAX。此设置无需刷新整个页面即可更新按钮状态，但不会删除前一个<%= pluralize(@company.get_likes.size,"people liked it") %>（“ 0”人喜欢它，被添加到新的“ 1”人喜欢它”）

如何删除上一个"@company.get_likes.size" people liked it句子？ 我该如何改善代码？

控制器：

  def toggle_favorite(company)
    if user_signed_in?
      if current_user.liked? company
        link_to raw("<i class='fa fa-star'></i>"),unlike_company_path(company),remote: true,method: :put
      else
        link_to raw("<i class='far fa-star'></i>"),like_company_path(company),method: :put
      end
    else
      link_to 'sign in to like',new_user_session_path
    end
  end

路线：

resources :companies do
    member do
      put "like" => "companies#like"
      put "unlike",to: "companies#unlike"
    end
end

视图：

<div class="text-center">
  <div id="<%= dom_id(company) %>">
    <%= pluralize(company.get_likes.size,"people liked it")) %>
    <%= toggle_favorite(company) %>
  </div>
</div>

like.js.erb

let starIcon = document.querySelector("#company_<%= @company.id %>").querySelector('.fa-star')
starIcon.parentElement.outerHTML = "<%= pluralize(@company.get_likes.size,"people liked it") %> <%= escape_javascript(toggle_favorite(@company)) %>"

unlike.js.erb

let farstarIcon = document.querySelector("#company_<%= @company.id %>").querySelector('.fa-star')
farstarIcon.parentElement.outerHTML = " <%= pluralize(@company.get_likes.size,t('views.company.bookmark.count_bookmark')) %> <%= escape_javascript(toggle_favorite(@company)) %>"

解决方法

您可以通过application_helper.rb文件来实现：

对于这种特殊情况，我宁愿使用.count而不是.size（由您决定）。有关更多信息，您可以检查count vs length vs size in a collection堆栈溢出问题。

1-定义方法：

def pluralize_get_likes(get_likes)
    if get_likes.count > 0
      "#{get_likes.count} people liked this"
    else
      "Here the text you want to be displayed (e.g.: Be the first one to vote this)"
    end
  end 

2-申请方法：

在like.js.erb和unlike.js.erb文件中用“ pluralize_get_likes ”替换“ pluralize ”。

like.js.erb：

let starIcon = document.querySelector("#company_<%= @company.id %>").querySelector('.fa-star')
starIcon.parentElement.outerHTML = "<%= pluralize_get_likes(@company.get_likes) %> <%= escape_javascript(toggle_favorite(@company)) %>"

视图也是如此：

<div class="text-center">
  <div id="<%= dom_id(company) %>">
    <%= pluralize_get_likes(company.get_likes) %>
    <%= toggle_favorite(company) %>
  </div>
</div>

应该这样做。