我偶爾需要根據條件向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元素添加類的優雅方式？

回答