在 EJS 中给出遵循 If 条件的样式

Give style following If condition in EJS

本文关键字：If 条件 样式 EJS      更新时间：2023-09-26
<% 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 中有条件地提供样式？

您可能希望有条件地设置一个像 .active 这样的类，并将其与 CSS 样式(例如红色背景色(一起使用。喜欢这个：

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

语法为：

<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>
<% }); %>
相关文章：