javascript - 使用jquery获取rails中每个 block 中元素的动态id

Question

我用一个简单的例子解释我的问题。我正在构建一个食谱应用程序。在通过 AJAX 加载的部分显示中，我执行以下操作:

_show.html.erb

<% @recipe.ingredients.each do |ingredient| %>
  <div class="col-xs-12" id="ingredient-<%= ingredient.id %>">
    <div id="amount-<%= ingredient.id %>"><%= ingredient.amount %></div>
    <%= ingredient.unit.unit_name %>
    <%= ingredient.ingredient_name %>
  </div>
<% end %>

这给了我一个类似的列表:

• 250 克奶酪
• 1升牛奶
• 等等

我现在想要做的(仅在我的示例中)是将每个金额值替换为短语“嗨，是我!”。因此我想我可以在我的部分中使用以下jquery(我没有使用Turbolinks)来从每个 block 中获取动态ID:

$( document ).ready(function() {
  $('#amount-<%= ingredient.id %>').html("Hi, it's me!");
});

我希望列表是:

• 嗨，是我!克奶酪
• 嗨，是我! l 牛奶
• 等等

但是，它不起作用，我不明白我做错了什么？如果我使用静态 id 或静态类，它就可以工作。但是(对于我想对每个金额执行的某些计算)，我需要基于 <%= ingredient.id %> 进行动态计算。 .

Answer 1

好的，我发现我的错误了。虽然是愚蠢的错误。我必须将 jquery 部分放在each do block 中。否则，当然 <%=做什么成分.id %> 没有被定义。

解决方案现在看起来像这样:

<% @recipe.ingredients.each do |ingredient| %>
  <div class="col-xs-12" id="ingredient-<%= ingredient.id %>">
    <div id="amount-<%= ingredient.id %>"><%= ingredient.amount %></div>
    <%= ingredient.unit.unit_name %>
    <%= ingredient.ingredient_name %>
  </div>

  <script>
    $('#amount-<%= ingredient.id %>').html("Hi, it's me!");
  </script>

<% end %>