html - 使用动态 ERB Id 创建单独的 div

Question

我正在尝试用我的 ERB 制作两个单独的 div(称为样本包按钮)(每个 div 在 div 中都有自己的链接)，但目前 div 不是单独创建的，只有一个包含两个链接的 div。这是我的代码:

<div id="sample-pack-container">
  <div id="sample-pack-background">
    <% @sample_packs.each do |sample_pack| %>
      <div class="sample-pack-button" id="sample-pack-<%= sample_pack.name %>">
      <%= link_to (sample_pack.name), play_sample_pack_path(sample_pack) %>
      <% end %>
      </div>
  </div>
</div>

所以目前，我有一个包含链接“kit1”和“kit2”的 div，而应该有两个单独的 div，每个 div 都有一个链接。

当我检查 html 上的元素时，我发现 id="sample-pack-kit2"嵌套在 id="sample-pack-kit1" 中我认为不应该是这样的:

<div id="sample-pack-container">
 <div id="sample-pack-background">
  <div class="sample-pack-button" id="sample-pack-kit1">
    <a href="/sample_packs/1/play">kit1</a>
    <div class="sample-pack-button" id="sample-pack-kit2">
      <a href="/sample_packs/2/play">kit2</a>
  </div>
 </div>
</div>

我不确定这是我的 ERB 的结构问题还是我的 CSS 的问题。我的 CSS 是:

#sample-pack-container {
  max-width: 913px;
  margin-top: 300px;
  margin-left: 600px;
}

#sample-pack-background {
  position: relative;
}

.sample-pack-button {
  position: absolute;
  width: 140px;
  height: 140px;
  background-color: #8B959E;
}

我尝试通过放置 class="sample-pack-button" 来移动我的 ERB在 .each 之上方法和制作新的p class="a-sample-pack-button' id="sample-pack-<%= sample_pack.name %>"但我仍然只得到一个 div。

总而言之，我正在尝试创建两个独特的 div，其中包含指向其各自示例包的链接。

Answer 1

您需要移动 end收盘后</div>的 sample-pack-button .

<div id="sample-pack-container">
  <div id="sample-pack-background">
    <% @sample_packs.each do |sample_pack| %>
      <div class="sample-pack-button" id="sample-pack-<%= sample_pack.name %>">
      <%= link_to (sample_pack.name), play_sample_pack_path(sample_pack) %>
      </div>
    <% end %>
  </div>
</div>