Question

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

如果我为.css（“color”，“orange”）交换.style.color，则下面的代码有效;但我希望这项改变是永久性的。

<% 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')

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

1 个答案: