EJS中如何根据res.locals变量动态为按钮添加class类名

你原本的实现思路是对的，只是存在两处语法问题：一是EJS条件标签没有正确闭合，二是EJS模板中可以直接访问res.locals挂载的变量，不需要写全res.locals前缀。
有两种等价的正确写法：

1. 简洁三元写法（推荐，代码更短不易出错）

<!-- myVariable值为a时，第一个按钮追加class3 -->
<button class="class1 class2 <%= myVariable === 'a' ? 'class3' : '' %>">按钮1</button>
<!-- myVariable值为b时，第二个按钮追加class4 -->
<button class="class1 class2 <%= myVariable === 'b' ? 'class4' : '' %>">按钮2</button>

2. 完整if块写法

<button class="class1 class2 <% if (myVariable === 'a') { %>class3<% } %>">按钮1</button>
<button class="class1 class2 <% if (myVariable === 'b') { %>class4<% } %>">按钮2</button>

补充提示：如果你的需求是控制按钮原生禁用状态，不需要额外写类名，直接动态输出disabled属性即可：

<button class="class1 class2" <%= myVariable === 'a' ? 'disabled' : '' %>>按钮1</button>

这个场景用EJS实现完全合理，属于服务端渲染的常规操作。服务端会直接拼接好带正确类名的最终HTML返回给客户端，没有额外的客户端运行开销，首屏渲染时按钮状态就是正确的，不会出现样式闪烁问题。

如果你的页面存在大量类似的动态类名判断，或者类名规则比较复杂，可以选择以下方案提升可维护性：

• 路由层预拼接类名：把类名判断逻辑从模板抽离到Express路由处理逻辑中，提前算好每个按钮的类名再传给模板，避免模板里混杂大量逻辑判断

// 路由处理逻辑中
res.locals.btn1Class = ['class1', 'class2', myVariable === 'a' ? 'class3' : ''].filter(Boolean).join(' ');
res.locals.btn2Class = ['class1', 'class2', myVariable === 'b' ? 'class4' : ''].filter(Boolean).join(' ');
res.render('target-page');

模板中直接引用预计算的类名即可：

<button class="<%= btn1Class %>">按钮1</button>
<button class="<%= btn2Class %>">按钮2</button>

• 客户端动态控制：如果按钮状态需要在用户操作后动态变化（不是首屏渲染就固定），可以把变量值挂载到DOM的data属性上，用前端JS控制类名切换

<!-- 模板中输出变量到DOM属性 -->
<div id="app" data-my-variable="<%= myVariable %>">
  <button id="btn1" class="class1 class2">按钮1</button>
  <button id="btn2" class="class1 class2">按钮2</button>
</div>

// 客户端JS逻辑
const app = document.getElementById('app');
const myVar = app.dataset.myVariable;
if (myVar === 'a') document.getElementById('btn1').classList.add('class3');
if (myVar === 'b') document.getElementById('btn2').classList.add('class4');

注意这个方案不适合首屏就确定状态的场景，会引入额外的客户端开销，还可能出现首屏样式闪烁。

内容的提问来源于stack exchange，提问作者Amber Butler