我偶尔会根据条件向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），但这并不属于那里。大多数人做了什么？
答案 0 :(得分：123)
我使用第一种方法，但语法稍微简洁：
<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和类。给定{47}的Person：
# <div id="person_47" class="person good">
<% div_for @person, class: (@success ? 'good' : 'bad') do %>
<% end %>
答案 1 :(得分：14)
标准方法的问题在于它需要视图中if语句或三元组形式的逻辑。如果您有多个条件CSS类与默认类混合，那么您需要将该逻辑放入字符串插值或ERB标记。
这是一种更新的方法，可以避免将任何逻辑放入视图中：
<div class="<%= class_string(ok: @success) %>">
some message here
</div>
class_string方法 class_string助手采用包含 CSS类名字符串和布尔值的键/值对的哈希值。该方法的结果是一串类，其中布尔值计算为true。
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 classNames前端框架中名为classSet（以前称为React）的附加组件。
截至目前，Rails中不存在class_names函数，但this article向您展示了如何在项目中添加或实现它。
答案 2 :(得分：2)
您还可以使用content_for帮助程序，尤其是当DOM位于布局中并且您希望根据部分加载来设置css类时。
在布局上：
%div{class: content_for?(:css_class) ? yield(:css_class) : ''}
关于部分：
- content_for :css_class do
my_specific_class
就是这样。
答案 3 :(得分：0)
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"
来源：