I'm trying to append a specific class to an element depending on the outcome of a switch-statement. Code below is just for clarification.

mixin changeColor(color)
  case color
    when 1
       .blue
    when 2
       .green
    default
       .red

div.foo +changeColor(1)
    p Bar

Should result in

<div class="foo blue">
    <p>Bar</p>
</div>

The foo element may contain multiple child elements, not just the p tag.

有帮助吗?

解决方案

Here an example without JS, "pure" Jade:

mixin changeColor(color)
  case color
    when 1
       div(class!=attributes.class).blue
         block
    when 2
       div(class!=attributes.class).green
         block
    default
       div(class!=attributes.class).red
         block

+changeColor(1)(class="foo")
  h1 More elements
  p.
    Bar
  .adiv
    p Bar

The output for 1:

<div class="foo blue">
  <h1>More elements</h1>
  <p>Bar</p>
  <div class="adiv">
    <p>Bar</p>
  </div>
</div>

其他提示

Try use js functions in Jade, like this

- var changeColor = function(color) {var returnedColor;switch (color) {case 0:returnedColor = 'blue';break;case 1:returnedColor = 'green';break;default :returnedColor = 'red';break;}return returnedColor;}

div.foo(class=changeColor(1))
  p Bar
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top