Javascript Jade 条件（if/else）将类添加到 div 内联
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14144274/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jade conditional (if/else) to add class to div inline
提问by jstevens13
Is there a way to do this inline in a jade template?
有没有办法在玉模板中内联执行此操作？
if(typeof fromEdit != 'undefined')
div#demo.collapse.in
else
div#demo.collapse
Would like to do this conditional check "inline" and the result would add the .in to the end of the div if fromEdit exists.
想要“内联”执行此条件检查，如果 fromEdit 存在，结果会将 .in 添加到 div 的末尾。
回答by Dogbert
回答by Arkanoid
If you don't want the class attribute to be added when there is no value, you can assign it undefined instead of an empty string. Here is the previous example, slightly modified:
如果您不希望在没有值时添加 class 属性，您可以将其分配为 undefined 而不是空字符串。这是前面的示例，稍作修改：
div#demo.collapse(class=typeof fromEdit === "undefined" ? undefined : "in")
Update: Also, if you are using pug, you can now add as many class=declarations as you want with different conditions and they'll get concatenated in the resulting class attribute. e.g.:
更新：此外，如果您使用pug，您现在可以根据class=需要添加任意数量的声明，并使用不同的条件，它们将连接到生成的类属性中。例如：
#demo.collapse(class=cond1 && 'class1' class=cond2 && 'class2')
回答by infografnet
As documented at http://jade-lang.com/reference/attributes/:
如http://jade-lang.com/reference/attributes/ 中所述：
The class attribute [...] It can also be an object mapping class names to true or false values, which is useful for applying conditional classes
class 属性 [...] 也可以是将类名映射到 true 或 false 值的对象，这对于应用条件类很有用
the task can be also done by the following:
也可以通过以下方式完成这项任务：
div#demo.collapse(class={ in: typeof fromEdit != 'undefined' })
Although it doesn't work here http://naltatis.github.com/jade-syntax-docs/(I think they need to update something), but it works with [email protected] .
虽然它在这里不起作用http://naltatis.github.com/jade-syntax-docs/（我认为他们需要更新一些东西），但它适用于 [email protected] 。
回答by bravedick
With pug 2 you can use this syntax:
使用 pug 2，您可以使用以下语法：
div#demo(class="collapse", class={"in": typeof fromEdit !== 'undefined'}) Home page
more here: https://pugjs.org/language/attributes.html
回答by Matthew Sundberg
Though an old question, I find that the following works since Pug includes object existence detection built in:
虽然是一个老问题，但我发现以下内容有效，因为 Pug 包含内置的对象存在检测：
div#demo.collapse(class=fromEdit? 'in':undefined)
If it's not obvious, this checks if fromEditexists and if it does enters inas the class, otherwise leaving the class blank.
如果不明显，则检查是否fromEdit存在以及是否in作为类进入，否则将类留空。
回答by paulalexandru
If you use angularjs you can use something like this:
如果你使用 angularjs 你可以使用这样的东西：
ng-class="{'in': typeof fromEdit !== 'undefined'}"
