如何使用三元运算符将类添加到 ejs 中的 HTML 元素

Posted 2023-02-22

【中文标题】如何使用三元运算符将类添加到 ejs 中的 HTML 元素

【英文标题】：How to use a ternary operator to add a class to an HTML element in ejs

【发布时间】：2017-06-18 15:25:56

【问题描述】：

我是使用 ejs 的新手。我有一个菜单，我想突出显示当前的菜单项。 我试过这个：

<li class=<% currentMenu == 'dashboard' ? 'active' : ''%>>
    <a href= '/dashboard'>
       <i class="material-icons">dashboard</i>
       <span>Dashboard</span>
    </a>
</li>

currentMenu 的值由 express 路由器提供服务，如下所示：

app.get('/dashboard', function(req, res) 
  if (isAuthorised) 
    res.render('pages/index', 
      title: 'Welcome | MW Tracker',
      email, userName, role, menus,
      currentMenu: 'dashboard'
    )
   else 
    res.render('pages/sign-in', 
      title: 'Sign In | MW Tracker'
    )
  
);

请问我应该如何添加课程？

【参考方案1】：

需要将<% %>标签替换为<%= %>标签才能输出表达式值：

<li class="<%= currentMenu === 'dashboard' ? 'active' : '' %>">
  <!-- -->
</li>

正如EJS documentation 所述，<% %> 标签用于控制流，没有输出代码；而<%= %> 标签输出并将值插入到 html 模板中。

例如，下面的if 语句使用<% %> 标记，因为该语句不需要输出到HTML。然后在条件内部，使用<%= %>标签将变量输出并插入到HTML模板中：<%= currentMenu %>。

<% if (currentMenu === 'dashboard')  %>
  <span><%= currentMenu %></span>
<%  %>