替换“真”/“假”有图像

发布于 2024-10-30 19:36:30 字数 123 浏览 1 评论 0 原文

我在 Rails 中有一个表,其中许多列都充满了真/假值。

如何进行高性能替换,用小图像替换充满 truefalse 的表格来表示 true 和 false?

I have a table in Rails where a number of columns are full of true/false values.

How can I do a performant substitution, replacing a table full of trues and falses with small images to represent true and false?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

绮筵 2024-11-06 19:36:30

我通常会向

元素添加一个类,然后使用 CSS 选择器为每种情况应用适当的背景图像。

在视图中...

<span class='foo-indicator <%= @item.foo? ? 'foo' : 'not-foo' %>'> </span>

在 CSS 样式表中...

.foo-indicator {
  /* Specify height, width, positioning, etc. */
}
.foo {
  background-image: url('../images/is-foo.png')
}
.not-foo {
  background-image: url('../images/not-foo.png')
}

I would usually add a class to a <span> or <div> element, and then use CSS selectors to apply the appropriate background image for each case.

In the view...

<span class='foo-indicator <%= @item.foo? ? 'foo' : 'not-foo' %>'> </span>

In the CSS stylesheet...

.foo-indicator {
  /* Specify height, width, positioning, etc. */
}
.foo {
  background-image: url('../images/is-foo.png')
}
.not-foo {
  background-image: url('../images/not-foo.png')
}
月亮邮递员 2024-11-06 19:36:30

在您的应用程序帮助程序中有一个类似这样的帮助程序方法

def display_status(status)
  (status == true) ? image("true.png") : image("false.png") 
end

private
def image(name)
 "/images/#{name}"
end

,并且在创建表时,使用参数调用“display_status”方法。

Have a helper method, something like this, in your application helper

def display_status(status)
  (status == true) ? image("true.png") : image("false.png") 
end

private
def image(name)
 "/images/#{name}"
end

And when you are creating the table, call the 'display_status' method with the parameter.

从来不烧饼 2024-11-06 19:36:30

与 Steve Jorgensen 相同的想法,但没有 css

"> ;

the same idea as Steve Jorgensen but without css

<img src="<%= @item.foo? ? "/images/true.png" : "/images/false.png" %>"></img>

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文