如何有条件地为翡翠中的文本分配颜色答案

【问题标题】：How can I conditionally assign a color to text in jade如何有条件地为翡翠中的文本分配颜色
【发布时间】：2014-01-08 19:50:42
【问题描述】：

我有一个使用 mongodb、node.js、express、jade 模板、jquery 的应用程序。我有一组文档，每个文档都包含“活动”或“过期”状态。我想用绿色显示“有效”文档的日期，用红色显示“过期”文档的日期。

.list
    if (applications.length === 0)
      | No applications.
    each application, index in applications
      .item
        div
          -if (application.Status = "active")
            -$( ".dateapplied" ).addClass("activeClass")
        div
        div.dateapplied
          div
                  -var day = application.Applied.getDate()
                  -var m = application.Applied.getMonth()
                  -var y = application.Applied.getFullYear()
                  -var prettydate = m + " / " + day + " / " + y
          div

          span.name=prettydate
          |&nbsp
        div.name

行 -$( ".dateapplied" ).addClass("activeClass") 呈现：

我的 CSS 类是：

.activeClass { 颜色：绿色 }

.过期类{ 红色 }

我的目标是让日期显示为红色表示过期，绿色表示有效。我正在尝试使用 css 类而不是内联 css。我不确定如何将类添加到 .dateapplied。或者，也许我想错了。任何帮助表示赞赏。

谢谢！

【问题讨论】：

标签： jquery css node.js mongodb

【解决方案1】：

试试这个：

.list
    if (applications.length === 0)
      | No applications.
    each application, index in applications
      .item
        div
        div.dateapplied(class=(application.Status == 'active')? 'activeClass':'expiredClass')
          div
                  -var day = application.Applied.getDate()
                  -var m = application.Applied.getMonth()
                  -var y = application.Applied.getFullYear()
                  -var prettydate = m + " / " + day + " / " + y
          div

          span.name=prettydate
          |&nbsp
        div.name

您可以在属性内应用条件，如下所示：

(class=(application.Status == 'active')? 'activeClass':'expiredClass')

【讨论】：

感谢@tpae Ternary 的救援！