1

HTML ページの a の幅を調整するための ruby​​ コードを埋め込みたいと考えています。

基本的に、Htmlページに次のようなループがあります

<% pass_fail.each do |row| %>

<div class="bar bar-success" style="width: 70%;"></div>
<div class="bar bar-warning" style="width: 20%;"></div>
<div class="bar bar-danger" style="width: 10%;"></div>

<% end %>

divの幅を次のようにしたい

((row[1]/(row[1]+row[2]+row[3]))*100)%
((row[2]/(row[1]+row[2]+row[3]))*100)%
((row[3]/(row[1]+row[2]+row[3]))*100)%

divの幅を設定するコードを埋め込むための正確な構文を教えてください。

4

2 に答える 2

2

rowが 3 つの int の配列であると仮定すると、次の出力に使用さ<%= %>れます。

<div style="width:<%= ((row[0].to_f / (row[0] + row[1] + row[2])) * 100) %>%">Div 1</div>
<div style="width:<%= ((row[1].to_f / (row[0] + row[1] + row[2])) * 100) %>%">Div 2</div>
<div style="width:<%= ((row[2].to_f / (row[0] + row[1] + row[2])) * 100) %>%">Div 3</div>

to_fは 0 と 1 の間にあるため、結果を取得するために使用する必要がありますinject。

<div style="width:<%= ((row[0].to_f / row.inject(:+)) * 100) %>%">Div 1</div>
<div style="width:<%= ((row[1].to_f / row.inject(:+)) * 100) %>%">Div 2</div>
<div style="width:<%= ((row[2].to_f / row.inject(:+)) * 100) %>%">Div 3</div>

これを何に使うかはよくわかりませんが、素晴らしいものであることは理解しています。

rowの合計が反復ごとに変化しない限り、実行を高速化するために、可能な場合は合計をキャッシュすることをお勧めします。

于 2012-11-13T23:05:52.367 に答える
0

CSS に作業を任せます。

スタイルシートで:

.bar-success {
    width:70%
}
.bar-warning{
    width:20%
}
.bar-danger{
    width:10%
}

あなたの HTML:

<div class="bar bar-success"></div>
<div class="bar bar-warning"></div>
<div class="bar bar-danger"></div>
于 2012-11-13T22:44:24.507 に答える