使用 EJS 和 HTML 向已添加类的元素添加其他类？答案

【问题标题】：Using EJS and HTML to add additional classes to an element where classes are already added?使用 EJS 和 HTML 向已添加类的元素添加其他类？
【发布时间】：2019-07-05 21:17:46
【问题描述】：

我目前正在尝试使用 ejs 为导航栏开发部分模板文件，但是我正在努力向已经添加了类的元素添加其他类。

我尝试了两种添加附加类的方法，这是第一种：

<li class='navbar-item'<% if (pageTitle === 'Home') { %> class="active" <% } %>> <a href="/home">Home</a></li>

但是这不起作用，所以我决定尝试将 EJS 嵌入到 class 属性中，如下所示

<li class="nav-item <% if (pageTitle === 'Home') { %> active <% } %>">

这也不起作用，我已确保 pageTitle 被正确提供，因为它在网页中的其他地方使用并且工作正常。

我不确定下一阶段是什么，我曾考虑使用额外的 JS 文件，但这似乎适得其反，因为我已经能够将 JS 嵌入到 HTML 中。

任何帮助表示赞赏，在此先感谢。

【问题讨论】：

标签： javascript html css node.js ejs

【解决方案1】：

您可以使用这样的条件运算符让您的生活更轻松

<li class="<%= pageTitle == 'Home' ? 'navbar-item active' : 'navbar-item' %>"

【讨论】：

这是一个比我更好的解决方案，它更高效，使用更少的代码，谢谢。

【解决方案2】：

我认为问题可能在于比较。作为第一次检查，在您的第二个版本中尝试“==”和“！=”。如果 '!=' 为你提供了 'current' 类，你就知道逻辑一般是好的。有关更多详细信息，以及如何在此处比较字符串的更好方法，请查看此处： How could I compare two string in Jsp?

【讨论】：

这是一个有趣的阅读，但是这里的比较应该几乎没有区别。我已确保输入的值是正确的。无论哪种方式都谢谢你。
我不是在谈论正确的值，我的意思是比较（运算符）本身可能是错误的。因此我建议使用否定运算符，看看你是否得到了正确的结果。还要注意引用资源中的 '===' vs '==' 和 '==' vs .equal()'。试试看吧。
我确实看过比较运算符，但是在这种情况下，它没有区别，因为我通过快速路由提供键值对象对，该值确实是一个字符串，因为它是静态的而不是比动态的。
在上面阅读了您自己的解决方案，您能详细说明为什么它解决了您的问题吗？正如我所看到的，您现在正在生成“navbar-item active”而不是“nav-item current”。似乎问题出在命名或 css 中，而不是代码逻辑中...
诚然，我添加的类中有一个错误，但是这个问题没有任何区别，因为我在 chrome 上使用 DevTools 来检查将添加哪些类，代码仍然存在持久问题没有成功地将类添加到类属性中......我现在已经更新了最初的帖子，以便更合适地工作。

【解决方案3】：

使用 if else 语句，我设法为我自己的问题开发了一个替代解决方案。我是在和一位同学讨论后得出这个结论的，这位同学给出了一个相对简单的解决方案。

<li <% if (pageTitle == 'Home') { %> class='navbar-item active'<% } else { %> class = 'navbar-item' <% } %>>

这并不完全符合我的期望，但仍然有效。

【讨论】：