EJS条件语句改变CSS

我在EJS循环，我想设置的CSS根据我的数据：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。

请帮忙。

来源

2017-01-01 shihandrana

首先创建对象是这样的：

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

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

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

来源

2017-01-01 22:47:04

它的工作原理，谢谢！但是，这样，我必须列出这两个属性的所有可能性（类型和确定）。其实每当“确定”是“是”，无论“类型”是什么值，它总是面板成功，所以我想知道是否有可能使它更短... – shihandrana

因此，如果确定===“是”面板型=“成功” – Shazam

尝试使用此代码...

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

你可以将您的逻辑封装在EJS运营商内部。它看起来有点凌乱，但它是什么。根据服务器端设置的方式，您也可以从服务器端传入参数，而不是在客户端执行逻辑。

最好的方法将取决于到数据库的访问以及任何其他逻辑正在进行的繁重工作。

来源

2017-01-02 06:40:09 Shazam

EJS条件语句改变CSS

回答

相关问题