EJS条件语句改CSS答案

【问题标题】：EJS conditional statement change CSSEJS条件语句改CSS
【发布时间】：2017-05-16 03:17:44
【问题描述】：

我在 EJS 中有循环，我想根据我的数据设置 css：

<% dummies.forEach(function(dummy) { %>
   <div class="panel panel-???">
   </div>
<% }) %>

我的数据：

var dummies = [{ 
    type: "funny",
    sure: "Yes" // this should generate panel-success
}, { 
    type: "funny", // this should generate panel-a
    sure: "No"
}, { 
    type: "happy", // this should generate panel-b
    sure: "No",
}];

所以只要sure 属性是Yes，它就会生成panel-success。否则，它会根据type 属性生成css。

请帮忙。

【问题讨论】：

标签： css node.js ejs

【解决方案1】：

我认为这段代码会有所帮助： <a class="<%= 1==2 ? 'active' : '' %>" href="#"></a>

【讨论】：

【解决方案2】：

尝试使用此代码...

  <% dummies.forEach(function(dummy) { %>
    <div class="panel panel-
      <% if (dummy.sure==="yes") { %> 
        success
      <% else %>
        <%= dummy.type %>
      >
    </div>
  <% }) %>

您可以将您的逻辑封装在 EJS 运算符中。它看起来有点乱，但它就是这样。根据服务器端的设置方式，您还可以从服务器端传入参数，而不是在客户端执行逻辑。

最好的方法取决于在哪里完成繁重的工作，例如访问数据库和任何其他逻辑。

【讨论】：

【解决方案3】：

首先像这样创建对象：

<%
let cssClass = {
    funny: {
        Yes: "success",
        No: "a"
    },
    happy: {
        No: "b"
    }
} 
%>

那么你应该只在模板中输出值：

<% dummies.forEach(function(dummy) { %>
   <div class="panel panel-<%= cssClass[dummy.type][dummy.sure] %>">
   </div>
<% }) %>

【讨论】：

它有效，谢谢！但是，这样，我必须列出这两个属性的所有可能性（类型和确定）。实际上，只要“确定”是“是”，无论“类型”的值是什么，它总是面板成功，所以我想知道是否有可能让它更短......
所以如果确定==="yes" panel-type="success"