css - 如何根据 bool 值在 Rails 中创建动态 CSS？

Question

我正在创建一个“待办事项网站”。用户可以登录并生成任务。每个任务都有两个复选框“紧急”和“重要”，它们都是与任务模型相关的 bool 值。一切都很好，但我想根据选中的复选框更改任务的背景颜色。所以一共应该有4种可能/背景色样式:

• 任务(重要:正确，紧急:正确)- 背景色:红色；
• 任务(重要:true，紧急:false)- 背景色:蓝色；
• 任务(重要:false，紧急:true)- 背景色:绿色；
• 任务(重要:false，紧急:false)- 背景色:灰色；

问题:

如何根据任务的紧急和重要 bool 值实现 4 种不同的背景颜色样式？

Answer 1

在你看来:

<% if task.important and task.urgent %>
  <div class="background-color-red">
    ...
  </div>
<% elsif task.important and !task.urgent %>
  <div class="background-color-blue">
    ...
  </div>
<% elsif !task.important and task.urgent %>
  <div class="background-color-green">
    ...
  </div>
<% elsif !task.important and !task.urgent %>
  <div class="background-color-grey">
    ...
  </div>
<%end%>

然后你可以用上面的class在你的css文件中定义background-color。