ruby-on-rails - Ruby + HTML div 标签

Question

我想嵌入一些 ruby​​ 代码来调整我的 html 页面上 a 的宽度。

基本上我在 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 宽度的确切语法。

Answer 1

假设row是一个包含三个整数的数组，<%= %>用于输出：

<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每次迭代之间的总和发生变化，否则建议尽可能缓存总和以加快执行速度。

Answer 2

让 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>