【问题标题】:Jade conditional (if/else) to add class to div inlineJade 条件(if/else)将类添加到 div 内联
【发布时间】:2012-12-18 03:10:05
【问题描述】:

有没有办法在玉模板中内联?

if(typeof fromEdit != 'undefined')
   div#demo.collapse.in
else
   div#demo.collapse

想要执行此条件检查“内联”,如果 fromEdit 存在,结果会将 .in 添加到 div 的末尾。

【问题讨论】:

  • 我用这个a(class=(selectNav=='myprofile' && 'selected'), href='...')

标签: javascript node.js express pug


【解决方案1】:

这行得通:

div#demo.collapse(class=typeof fromEdit === "undefined" ? "" : "in")

试试here

【讨论】:

  • 但如果条件为假,您甚至不希望元素具有class 属性..
  • 对于像 a(class=tasks[i].status ? 'btn btn-success' : 'btn btn-dark', href=/turn/ ${tasks[i]._id}) 这样的对象值怎么做无法读取未定义的属性“状态”
【解决方案2】:

如果你不希望class属性在没有值的时候被添加,你可以将它赋值为undefined而不是一个空字符串。这是前面的例子,稍作修改:

div#demo.collapse(class=typeof fromEdit === "undefined" ? undefined : "in")

更新:另外,如果您使用pug,您现在可以在不同的条件下添加任意数量的class= 声明,它们将在生成的类属性中连接起来。例如:

#demo.collapse(class=cond1 && 'class1' class=cond2 && 'class2')

【讨论】:

  • 谢谢!正是我想要的。
  • 如果需要检查多个条件怎么办?例如两个类,每个类都有自己的检查?
【解决方案3】:

http://jade-lang.com/reference/attributes/ 所述:

类属性 [...] 它也可以是一个对象,将类名映射到真或假值,这对于应用条件类很有用

该任务也可以通过以下方式完成:

div#demo.collapse(class={ in: typeof fromEdit != 'undefined' })

虽然它在http://naltatis.github.com/jade-syntax-docs/ 处不起作用(我认为他们需要更新一些东西),但它适用于jade@1.11.0。

【讨论】:

  • 这是现在使用玉/哈巴狗的方式。它允许多个条件类,并为对象添加另一个键。
【解决方案4】:

对于哈巴狗 2,您可以使用以下语法:

div#demo(class="collapse", class={"in": typeof fromEdit !== 'undefined'}) Home page

更多:https://pugjs.org/language/attributes.html

【讨论】:

    【解决方案5】:

    虽然是一个老问题,但我发现以下工作,因为 Pug 包含内置的对象存在检测:

    div#demo.collapse(class=fromEdit? 'in':undefined)
    

    如果不是很明显,这会检查 fromEdit 是否存在,如果存在则将 in 作为类输入,否则将类留空。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-05-23
      • 1970-01-01
      • 1970-01-01
      • 2017-07-17
      • 2021-11-23
      • 1970-01-01
      相关资源
      最近更新 更多