Question

我正在设置动态值的字体颜色，如下所示：如果incident.state_id = 1，则为红色字体，如果为incident.state_id = 2，则为黄色字体，如果为incident.state_id = 3，则为红色字体。

incident.state_id = 1 : state.name = "Pending Investigation"
incident.state_id = 2 : state.name = "Investigation in Progress"
incident.state_id = 3 : state.name = "Investigation Closed"

我已经采用了以下的coffeescript，但我知道zsch关于js / coffee，所以我不知道要改变什么来使这项工作。

目前，所有州的字段都显示为红色。

incidents.js.coffee：

$(".state").each ->
  $this = $(this)
  value = $this.text()
  if value = 1
    $this.addClass "red"
  else if value = 2
    $this.addClass "yellow"
  else
    $this.addClass "green"

application.html.erb

td.state {
}

.red {
    color: #f99;
}
.yellow {
    color: #ff9;
}
.green {
    color: #9f9;
}

incidents.html.erb：

<td class="state"><%= incident.state.name %></td>

Answer 1

如果您的事件都是从服务器呈现的，并且没有动态添加到页面中，那么您实际上并不需要任何JS来设置类。只需创建一些使用状态ID的css类：

td {
  .state-1 {
    color: #f99;
  }
  .state-2 {
    color: #ff9;
  }
  .state-3 {
    color: #9f9;
  }
}

您的观点将如下所示：

<td class="<%= state-#{incident.state_id} %>"><%= incident.state.name %></td>

Answer 2

为什么要烦扰咖啡脚本（为此）？

相反，我建议在erb文件中设置正确的类，如下所示：

<% if incident.state_id == 1  %>
    <td class="red"><%= incident.state.name %></td>
<% elsif incident.state_id == 2 %>
    <td class="yellow"><%= incident.state.name %></td>
<% else %>
    <td class="green"><%= incident.state.name %></td>
<% end %>

这可能不是最干净的方法，但应解决眼前的问题。

Rails表 - 动态条件字体格式

2 个答案: