Question

我在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。

请帮忙。

Answer 1

首先创建这样的对象：

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

然后你应该只在模板中输出值：

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

Answer 2

尝试使用此代码......

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

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

最好的方法取决于在数据库和任何其他逻辑进行的情况下完成繁重的工作。

Answer 3

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

EJS条件语句更改CSS

3 个答案: