Question

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

基本上我在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>

Ruby + HTML div标签

2 个答案: