首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在视图中有条件地向HTML元素添加类的优雅方法是什么?

在视图中有条件地向HTML元素添加类的优雅方法是什么?
EN

Stack Overflow用户
提问于 2010-04-13 12:11:51
回答 4查看 83K关注 0票数 118

我偶尔需要根据条件向html元素添加一个类。问题是我想不出一种干净利落的方法。下面是我尝试过的一个例子:

代码语言:javascript
复制
<div <%= if @status = 'success'; "class='ok'"; end %>>
   some message here
</div>

代码语言:javascript
复制
<% if @status == 'success' %>
   <div class='success'>
<% else %>
   <div>
<% end %>
   some message here
</div>

我不喜欢第一种方法,因为它看起来很拥挤,很难读懂。我不喜欢第二种方法,因为嵌套搞砸了。把它放到模型中是很好的,(类似于@status.css_class),但这不属于那里。大多数人是做什么的?

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2010-04-13 12:16:28

我使用第一种方法,但语法更简洁:

代码语言:javascript
复制
<div class="<%= 'ok' if @status == 'success' %>">

尽管通常您应该使用布尔值true或数字记录ID表示成功,而使用布尔值falsenil表示失败。这样你就可以测试你的变量了:

代码语言:javascript
复制
<div class="<%= 'ok' if @success %>">

如果要在两个类之间进行选择,则使用三元?:运算符的第二种形式非常有用:

代码语言:javascript
复制
<div class="<%= @success ? 'good' : 'bad' %>">

最后,您可以使用Rail的record tag helpers,例如div_for,它将根据您提供的记录自动设置您的ID和类。给定一个id为47的Person

代码语言:javascript
复制
# <div id="person_47" class="person good">
<% div_for @person, class: (@success ? 'good' : 'bad') do %>
<% end %>
票数 158
EN

Stack Overflow用户

发布于 2017-01-19 00:09:41

避免视图中的逻辑

标准方法的问题在于,它需要视图中的if语句或三元组形式的逻辑。如果有多个条件CSS类与默认类混合在一起,则需要将该逻辑放入字符串插值或ERB标记中。

下面是一个更新的方法,它避免了将任何逻辑放入视图中:

代码语言:javascript
复制
<div class="<%= class_string(ok: @success) %>">
   some message here
</div>

class_string方法

class_string帮助器使用由、CSS、类名、字符串布尔值组成的键/值对的散列。该方法的结果是一个类字符串,其中布尔值的计算结果为true。

示例用法

代码语言:javascript
复制
class_names(foo: true, bar: false, baz: some_truthy_variable)
# => "foo baz"

其他用例

这个帮助器可以在ERB标记中使用,也可以与link_to等Rails帮助器一起使用。

代码语言:javascript
复制
<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的类

代码语言:javascript
复制
<div class="<%= [:good, :bad] => @success %>">

受React启发

该技术的灵感来自于Facebook的React前端框架中一个名为classNames (以前称为classSet)的附加组件。

在Rails项目中使用

到目前为止,Rails中还不存在class_names函数,但是this article向您展示了如何在您的项目中添加或实现它。

票数 21
EN

Stack Overflow用户

发布于 2020-09-21 07:01:53

class_names (Rails 6.1+)

Rails 6.1引入了一个class_names视图帮助器,使在视图中有条件地应用类名变得更容易。

之前:

代码语言:javascript
复制
<div class="<%= item.for_sale? ? 'active' : '' %>">

之后:

代码语言:javascript
复制
<div class="<%= class_names(active: item.for_sale?) %>">

更多示例:

代码语言:javascript
复制
class_names("foo", "bar")
# => "foo bar"
class_names({ foo: true, bar: false })
# => "foo"
class_names(nil, false, 123, "", "foo", { bar: true })
# => "123 foo bar"

资料来源:

票数 14
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/2626936

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档