javascript - Rails Table - 动态条件字体格式

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 block ，但我对 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;
  }
}

您的 View 将如下所示:

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