jquery - 如何有条件地为 Jade 中的文本分配颜色

Question

我有一个使用 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")渲染:

500 类型错误:/Users/eddie/logicalpath/jobkeeper/views/applications.jade:20 18|分区 19| -if (application.Status = "active") > 20| -$( ".dateapplied").addClass("activeClass") 21|分区 22| div.dateapplied 23 | div undefined 不是函数

我的 CSS 类是:

.activeClass { 颜色:绿色

.过期类{ 红色

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

谢谢!

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