EJS 切换类 - JavaScript

在使用EJS（Embedded JavaScript）作为模板引擎时，我们可能需要在渲染 HTML 页面时动态地添加或删除某个元素的类。本文将介绍如何使用 JavaScript 和 EJS 实现切换类的功能。

示例

首先，让我们来看一个简单的示例：

<div class="my-div <%= active ? 'active' : '' %>">
  这是一个示例 div。
</div>

在上面的代码中，我们使用了EJS的语法 <%= %>，将一个变量 active 的值动态地设置为该 div 元素的类名。如果 active 的值为 true，则该元素的类名为 my-div active；否则，只有 my-div。

现在，让我们来看看如何使用 JavaScript 来实现在点击按钮时动态地更新 active 变量的值。

HTML

<div class="my-div <%= active ? 'active' : '' %>">
  这是一个示例 div。
</div>

<button id="toggle-button">切换类</button>

在上面的代码中，我们添加了一个按钮，当用户点击该按钮时，将通过 JavaScript 代码更新 active 变量的值，并重新渲染 .my-div 元素的类。

JavaScript

const divElement = document.querySelector('.my-div');
const toggleButton = document.querySelector('#toggle-button');
let active = false;

toggleButton.addEventListener('click', () => {
  active = !active;
  divElement.className = `my-div ${active ? 'active' : ''}`;
});

在上面的代码中，我们首先获取了 .my-div 元素和切换按钮，然后初始化了变量 active 的值为 false。接着，我们注册了一个事件监听器，当 toggleButton 被点击时，会调用我们定义的回调函数。在这个回调函数中，我们先通过取反 active 的值来切换它的状态，然后使用 className 属性来更新 .my-div 元素的类名。

结论

在本文中，我们介绍了如何使用 JavaScript 和 EJS 实现切换 HTML 元素的类名。通过这种技术，我们可以在渲染 HTML 页面时动态地添加或删除某个元素的类，以便在用户与网站交互时产生视觉效果。