按照 EJS 中的 If 条件给出样式

Question

<% docs.forEach( function ( doc ){ %>

<div class="item">
    <% if (doc.Active) { %>
    <style> .item { background-color:red }</style>
    <% } %>
</div>

<% }); %>

假设有 3 个文档，

doc1 (Active == true)
doc2 (Active == true)
doc3 (Active == false)

我只想给 Active == true 样式。我像上面那样编码，但结果是每个 div 都被赋予了样式。所以最后都是红色背景，这不是我所期望的。

如何在 EJS 中有条件地提供样式？

Answer 1

语法是：

<style> .item { background-color:red; } </style>

要仅将其设置为其中一项，请使用：

<style>
   .active { background-color:red; } 
</style>

<% docs.forEach( function ( doc ){ %>

<% if (doc.Active) { %>
   <div class="item acitve">
<% } else { %>
   <div class="item">
<% } %>

   ...

  </div>

<% }); %>

Answer 2

您可能希望有条件地设置 class，例如 .active，并将其与您的 CSS 样式（例如红色 background-color）结合使用。像这样：

<% docs.forEach(function (doc) { %>    
  <div class="item <%= doc.Active ? 'active' : '' %>"></div>
<% }); %>

按照 EJS 中的 If 条件给出样式

Give style following If condition in EJS

javascript

css

ejs