我偶尔需要根据条件向html元素添加一个类。问题是我找不到一个干净的做法。下面是我试过的东西的例子：什么是有条件地向视图中的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），但那不属于那里。大多数人做什么？

来源

2010-04-13 ryeguy

101

我用的是第一种方式，但有一个稍微更简洁的语法：

<div class="<%= 'ok' if @status == 'success' %>">

虽然通常你应该代表成功与布尔true或数字记录ID，并以失败布尔false或nil。这样，您就可以测试你的变量：

<div class="<%= 'ok' if @success %>">

使用三元?:运营商的第二种形式，如果你想两个类之间进行选择是非常有用的：

<div class="<%= @success ? 'good' : 'bad' %>">

最后，您可以使用铁路的record tag helpers这样如div_for，它会根据您提供的记录自动设置您的ID和班级。给定一个Person ID为47：

# <div id="person_47" class="person good"> 
<% div_for @person, class: (@success ? 'good' : 'bad') do %> 
<% end %>

来源

2010-04-13 04:16:28 meagar

+1标签帮手似乎是一个干净的方法 – Anurag 2010-04-13 05:09:28

@meager，我不知道'div_for'。非常酷:) – 2010-04-13 05:15:28

@Anurag，请查看http://api.rubyonrails.org/classes/ActionController/RecordIdentifier.html#M000482。漂亮的东西。 – 2010-04-13 05:22:04

避免逻辑视图中的

与标准方法的问题是，它需要在逻辑中的视图if陈述或者ternaries形式。如果您有多个条件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标签或使用Rails助手如link_to使用。

<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 %>">

灵感来自阵营

该技术是通过一个附加称为启发（前身为classSet）来自Facebook的React前端框架。

使用在你的Rails项目

截至目前，该class_names功能并不在Rails的存在，但this article告诉您如何添加或落实到项目中。

来源

2017-01-18 16:09:41

您还可以使用content_for helper，特别是如果DOM位于布局中，并且您希望根据部分加载设置css类。

在布局：

%div{class: content_for?(:css_class) ? yield(:css_class) : ''}

在部分：

- content_for :css_class do 
    my_specific_class

即它。

来源

2017-05-03 11:31:53 acmoune

什么是有条件地向视图中的HTML元素添加类的优雅方式？

回答