我有时必须根据条件向 html 元素添加一个类。问题是我想不出一个干净的方法。这是我尝试过的东西的一个例子：
<div <%= if @status = 'success'; "class='ok'"; end %>>
some message here
</div>
或
<% if @status == 'success' %>
<div class='success'>
<% else %>
<div>
<% end %>
some message here
</div>
我不喜欢第一种方法，因为它看起来很拥挤且难以阅读。我不喜欢第二种方法，因为嵌套搞砸了。将它放入模型中会很好，（类似于@status.css_class），但这不属于那里。大多数人都做什么？
【问题讨论】：
标签： ruby-on-rails views
我使用第一种方式，但语法稍微简洁一些：
<div class="<%= 'ok' if @status == 'success' %>">
虽然通常您应该使用布尔值 true 或数字记录 ID 表示成功，而使用布尔值 false 或 nil 表示失败。这样你就可以测试你的变量了：
<div class="<%= 'ok' if @success %>">
如果您想在两个类之间进行选择，使用三元 ?: 运算符的第二种形式很有用：
<div class="<%= @success ? 'good' : 'bad' %>">
最后，你可以使用Rail的record tag helpers，比如div_for，它会根据你给它的记录自动设置你的ID和class。给定一个 ID 为 47 的 Person：
# <div id="person_47" class="person good">
<% div_for @person, class: (@success ? 'good' : 'bad') do %>
<% end %>
【讨论】：
标准方法的问题在于它需要if 语句或视图中的三元组形式的逻辑。如果您有多个条件 CSS 类与默认类混合，那么您需要将该逻辑放入字符串插值或 ERB 标记中。
这是一种避免将任何逻辑放入视图的更新方法：
<div class="<%= class_string(ok: @success) %>">
some message here
</div>
class_string方法class_string 帮助器采用由 CSS 类名字符串和布尔值组成的键/值对的散列。该方法的结果是一串类，其中布尔值评估为真。
class_names(foo: true, bar: false, baz: some_truthy_variable)
# => "foo baz"
这个助手可以用在ERB标签中，也可以和link_to这样的Rails助手一起使用。
<div class="<%= class_string(ok: @success) %>">
some message here
</div>
<% div_for @person, class: class_string(ok: @success) do %>
<% end %>
<% link_to "Hello", root_path, class: class_string(ok: @success) do %>
<% end %>
对于需要三元的用例（例如@success ? 'good' : 'bad'），传递一个数组，其中第一个元素是true 的类，另一个是false 的类
<div class="<%= [:good, :bad] => @success %>">
这项技术的灵感来自 Facebook 的 React 前端框架中名为 classNames（以前称为 classSet）的插件。
到目前为止，Rails 中不存在class_names 函数，但this article 向您展示了如何将其添加或实现到您的项目中。
【讨论】：
Rails 6.1 引入了 class_names 视图助手
使有条件地应用类名更容易
在视图中。
之前：
<div class="<%= item.for_sale? ? 'active' : '' %>">
之后：
<div class="<%= class_names(active: item.for_sale?) %>">
更多示例：
class_names("foo", "bar")
# => "foo bar"
class_names({ foo: true, bar: false })
# => "foo"
class_names(nil, false, 123, "", "foo", { bar: true })
# => "123 foo bar"
来源：
【讨论】：
您也可以使用 content_for 帮助器，尤其是当 DOM 位于布局中并且您希望根据部分加载设置 css 类时。
关于布局：
%div{class: content_for?(:css_class) ? yield(:css_class) : ''}
部分：
- content_for :css_class do
my_specific_class
就是这样。
【讨论】：