如何在ejs中使用三元运算符为HTML元素添加类

Question

我刚开始使用ejs，我有一个菜单，我想要高亮显示当前的菜单项。我已经尝试了以下代码：

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

当前菜单的值由以下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'
    })
  }
});

请问我应该怎样添加这个类？

- cdaiga

Answer 1

为了输出表达式的值，您需要用<%= %>标签替换<% %>标签：

```HTML

您需要用<%= %>标签替换<% %>标签，以便输出表达式的值：

```

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

根据EJS文档，<% %>标签用于控制流程，不输出代码；而<%= %>标签则将值输出并插入到HTML模板中。

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

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

- Josh Crozier