javascript - 如何使用条件为一个元素设置多个类

Question

这个 EJS 脚本

<li class=<%= (path==='about') ? 'active main-header--nav-item' : 'main-header--nav-item' %>>about</li>

在页面上呈现如下:

<li class="active" main-header--nav-item="">about</li>

当我试图使其输出为:

<li class="active main-header--nav-item">about</li>

即两堂课。我假设我在条件语法中犯了一个简单的错误，但我似乎无法修复它。

Answer 1

这是因为在您的 EJS 模板中，您没有用 "" 括住类列表。在这种情况下，空白字符最终将被解释为属性的结尾。上面的模板实际上呈现为:

<li class=active main-header--nav-item>about</li>

然后，浏览器会将 class 解释为具有 active 值，而 main-header--nav-item 只是一些自定义 HTML 属性，因此您观察到的输出为:

<li class="active" main-header--nav-item="">about</li>

你应该这样做:

<li class="<%= (path==='about') ? 'active main-header--nav-item' : 'main-header--nav-item' %>">about</li>