javascript - Javascript object.style.color 在 create.js.erb 中不起作用

Question

请查看下面的 create.js.erb 代码，该代码在创建时淡入新投票。当值低于0时，我希望总票数的颜色发生变化。

如果我将 .style.color 换成 .css("color", "orange"); ，则下面的代码有效 但是我希望更改是永久性的。

<% if @vote.new_record? %>
alert("Failed to create vote: <%= j @vote.errors.full_messages.join(', ').html_safe %>");
<% else %>
var votes = $("<h1><%= @vote.votable.votes_count %></h1>");
<% if @vote.votable.votes_count < 0 %>
$('#<%= "#{votes_count}_#{id}" %>').style.color = "#FF8800";
<% end %>
$('#<%= "#{votes_count}_#{id}" %>').html(votes.fadeIn(1000));
<% end %>

当使用 .style.color 时，不调用 fadeIn 代码，也不会显示投票。

为什么 style.color 在这种情况下不起作用？

编辑

感谢 anspnm 的评论，我已将违规行更改为：

document.getElementById('<%= "#{votes_count}_#{id}" %>').className += " orange-arrows h1";

它起作用并改变了投票文本的颜色，但是，当浏览器刷新时，这种颜色仍然不会持续存在并且会消失。

Answer 1

在渲染元素时加载时检查是否存在投票计数。

像这样的东西

<div class="<%= @vote.votable.votes_count < 0 ? 'default-arrows' : 'orange-arrows' %>"> 

因此，在页面刷新时，检查将根据 vote_count 处理颜色。

对于 ajax 调用使用 this，它将通过 ajax 处理新创建的元素

$('#<%= "#{votes_count}_#{id}" %>').addClass('orange-arrows')