如何在JS中为<div>设置类条件，用Bootstrap隐藏空标题区块？

你的问题出在动态类的语法没被模板引擎正确解析，导致外层div没加上d-none类，所以card-body区块依然显示。下面给你针对性的解决方案：

1. 修正模板语法 #

你当前的写法里，class属性的表达式没有被正确识别，模板引擎把整个字符串当成了class值，而不是执行判断逻辑。根据常见的开发场景，给你对应写法：

场景1：服务端模板（比如EJS） #

用<%= %>包裹条件表达式，这是EJS的输出语法：

<div class="<%= post.title === '' ? 'd-none' : 'd-inline' %>">
    <div class="card-body override-bs">
         <%= post.title %>
    </div>
</div>

场景2：Vue框架 #

用:class绑定动态类：

<div :class="post.title === '' ? 'd-none' : 'd-inline'">
    <div class="card-body override-bs">
         {{ post.title }}
    </div>
</div>

场景3：React框架 #

用className接收JS表达式：

<div className={post.title === '' ? 'd-none' : 'd-inline'}>
    <div className="card-body override-bs">
         {post.title}
    </div>
</div>

2. 更严谨的空值判断 #

如果post.title可能是null、undefined（不只是空字符串），可以把判断改成更通用的写法，确保所有空状态都能触发隐藏：

<!-- EJS示例 -->
<div class="<%= !post.title ? 'd-none' : 'd-inline' %>">
    <div class="card-body override-bs">
         <%= post.title || '' %>
    </div>
</div>

!post.title会在post.title为空字符串、null、undefined时返回true，更稳妥。

验证方法 #

你可以在浏览器的开发者工具里查看外层div的class属性，如果显示的是d-none，说明逻辑生效了；如果还是原来的表达式字符串，说明模板语法没写对，要对应你用的框架/模板引擎调整。

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