Question

我在循环内有一个if语句，用于为类名更改变量（名为var_class）。如何使它成为连续字符串？

这是代码：

<% j = 0%>
<% @question.each do |index| %>
<% var_class = ""%>
   <% j == 0 ? var_class = "tab-pane fade active show" : var_class = "tab-pane fade" %>
   <div class=<%=var_class %> style='height: 444px; overflow-y: auto;' id=<%="question#{j+=1}"%>>

但是当我在chrome inspect中查看html时，它不包含为连续字符串，而是在有空间时被分隔开。像这样：

class= "tab-pane" fade active show

但我希望它成为

class = "tab-pane fade active show"

我已经尝试过<div class=<%=#{var_class} %>和<div class=<%="var_class" %>及其衍生版本。有人可以帮忙吗？

Answer 1

我认为您缺少类和id属性的引号。

<div class='<%=var_class %>' style='height: 444px; overflow-y: auto;' id='<%="question#{j+=1}"%>'>

Answer 2

弥赛亚的回答是它的基础。如果字符串两端没有引号，则DOM碰到空格时会停止类。它认为其他项目是div标记上的属性。

以一种最佳实践方式，我们通常希望避免在Rails视图中进行局部分配（在其中设置变量）。这确实想成为帮助者或装饰者（如果您确实需要该级别的功能和可测试性）。

[以下是我尚未测试的伪代码，因此可能存在一些小错误]

在您的ERB视图中：

<% @questions.each do |index| %>
  <div class="<%= classy(index) %>" id="[TBD see below]">
<% end %>

如果可能的话，我建议找到比div更多的语义HTML标记。迭代器（.each）往往是对象列表，因此也许在内部带有LI的UL（无序列表）或OL（有序列表）可能是更好的选择。 UL默认为您提供按钮，而OLs默认为您提供数字，但是可以更改。

您可能还希望避免在ID名称中使用＃号，因为您将在具有#name的CSS文件中调用ID。因此，＃name＃2在DOM中可能会给您带来一些意想不到的混乱结果。您可能想使用each_ with _index来获取数组和索引值。这里的差异相当不错的解释：What is the "right" way to iterate through an array in Ruby?

<ul class="questions">
<% @questions.each_with_index do |question,index| %>
  <li class="<%= classy(question, index) %>" id="question_<%= index %>">
    [CONTENT]
  </li>
<% end %>
</ul>

every_helper.rb中的帮助程序方法（如果站点范围内，则与类名或应用程序匹配）：

def classy(question, index)
  if index == 0
    "tab-pane fade active show"
  else
    "tab-pane fade"
  end
end

在此期间，让我们从视图中获取演示文稿标记。在您的CSS文件中：

.tab-pane.fade {
  height: 444px;
  overflow-y: auto;
}

如果您尝试实现其他目标，请告诉我们。根据阅读问题和代码，这是我最好的猜测。

Answer 3

在Ruby中，您可以使用Enumerable#each_with_index遍历带有索引的集合：

<% @question.each_with_index do |value, index| %>

<% end %>

<% end %>

通常在Ruby中，如果您使用.each或任何带有外部突变变量的迭代器，那么您做错了。

您还可以使用content_tag清理视图：

<% @question.each_with_index do |value, index| %>
  <% 
      classes = ["tab-pane", "fade"] 
      classes = classes + ["active", "show"] if index == 0
  %>
  <%= content_tag :div, class: classes, id: "question#{index+1}" do %>

  <% end %>
<% end %>

如果您只加入一个类数组，则可以将相同的方法用于直接ERB插值：

<div class="<%= classes.join(" ")%>" ...

html.erb文件中的类名分隔

3 个答案: