Question

我想将列表中的第一个元素分配给类似

的类

<input type="button" value="Top View" class="button selected-view">
<input type="button" value="Front View" class="button">
<input type="button" value="Side View" class="button">
<input type="button" value="Back View" class="button">
<input type="button" value="Perspective" class="button">

我可以像这样使用for循环

- var cameraChoice = ["Top View", "Front View", "Side View", "Back View", "Perspective"]
    - for (i = 0; i < cameraChoice.length; i++)
        if i === 0
            input.button(type="button" class=" selected-view" value=cameraChoice[i])
        else
            input.button(type="button" value=cameraChoice[i])

但我想知道是否有更好的方法来做到这一点。

的更多内容

each view in ["Top View", "Front View", "Side View", "Back View", "Perspective"]
    input(type="button" class="button" value=view)

我刚从玉开始，我试图寻找答案，但到目前为止我还没有运气。

Answer 1

解决方案1 ：在寻找快速解决方案时，您的第二种方法几乎已完成。只需将对数组索引的引用添加到each语句中即可。此外，您可以使用短条件语法：

each view,index in ["Top View", "Front View", "Side View", "Back View", "Perspective"]
  - var className = (index == 0) ? 'button selected-view' : 'button'
  input(type="button", class=className, value=view)

解决方案2 ：在实际应用程序中，您的控制代码可能知道当前活动（选定）视图，因此决定是否将其他类属性应用于特定按钮可能取决于所包含的状态在（JS）对象中。无论在何处创建和驻留，您的代码可能稍后会有所不同。猜猜以下JS对象包含有关可用“透视”视图的信息：

var views = { 
  'top': { 
    label: 'Top View', 
    selected: true
  }, 
  'front': {
    label: 'Front View', 
    selected: false
  }, 
  'side': {
    label: 'Side View', 
    selected: false
  }
  ...

}

然后，您还可以使用jade文件中的each语句迭代JS对象：

each view, index in views
  - var className = (view.selected) ? 'selected-view' : ''
  input(type="button", class='button', class=className, value=view.label)

请注意，这次我使用属性class两次。它说明了在使用jade时应用多个类属性的另一种方法（我个人不喜欢它并且更喜欢预先构建的类名字符串）。

我希望这会对你有所帮助，至少回答你的问题。但是，这只是几种可能的方式之一，具体取决于您的前端/后端架构。

如何将列表的第一个元素赋予玉石类？

1 个答案: