Question

我正在构建一个具有upvoting和downvoting功能的Rails应用程序。如果upvotes是＆gt;我希望颜色变为绿色。 0如果downvotes是＆gt;则变为红色0.我有一个帮助器，可以像这样呈现页面，但我希望它在用户屏幕上更新而不刷新页面。

index.html.erb

<div class="panel-left">
  <%= link_to 'Upvote', upvote_post_path(post), method: :patch, remote: true  %>
  <br />
  <%= link_to 'Downvote', downvote_post_path(post), method: :patch, remote: true %>

  <h1 class="<%=number_of_votes(post.vote_count) %>">
    <div id="total-votes-<%= post.id %>">
      <%= post.vote_count %>
    </div>
  </h1>
</div>

upvote.js.erb：

// this updates the counter: it works
$("#total-votes-<%= @post.id %>").html("<%= @post.vote_count %>")

//this is what I am not sure of, I hacked it together but it breaks everything (prevents the above from updating) and shows a server error in the console
if($('<%= escape_javascript @post.vote_count) %>') > 0) {
  $("<%=escape_javascript number_of_votes(post.vote_count) %>").attr('style', 'background-color: rgb(179, 144, 114)');
} else {
  $("<%= escape_javascript number_of_votes(post.vote_count) %>").attr('style', 'background-color: rgb(115, 227, 87)');
};

发布帮助

module PostsHelper
  def number_of_votes(votes)
    if votes > 0
      'positive-bg'
    elsif votes < 0
      'negative-bg'
    end
  end
end

正如我所说的一切正常，但我希望如果用户的投票足以将@post.vote_count更改为大于或小于0，则背景会改变颜色。

Answer 1

您只需更改class标记中的h1，因此只需向其中添加id（就像您为其子div添加一个class一样并更新js.erb文件中的元素<div class="panel-left"> <%= link_to 'Upvote', upvote_post_path(post), method: :patch, remote: true %> <br /> <%= link_to 'Downvote', downvote_post_path(post), method: :patch, remote: true %> <h1 id="vote-<%= post.id %>" class="<%=number_of_votes(post.vote_count) %>"> <div id="total-votes-<%= post.id %>"> <%= post.vote_count %> </div> </h1> </div>。

<强> index.html.erb

id="vote-<%= post.id %>"

注意添加id; class将识别该元素并更改其$("#total-votes-<%= @post.id %>").html("<%= @post.vote_count %>") $("#vote-<%= @post.id %>").attr("class", "<%= number_of_votes(@post.vote_count) %>");。

<强> upvote.js.erb

id

因此，您将使用h1 class标记来更新其number_of_votes，方法与首先分配它的方式相同（即使用VALUES(?,?,?,?),(?,?,?,?) ,(?,?,?,?) 1 2 3 4 1 2 3 4 1 2 3 4帮助程序。）< / p>

根据更新的记录更改背景颜色

1 个答案: