jQuery 触发嵌套形式的所有实例 rails 茧

Question

我有一个表单，其中包含使用 cacoon 的嵌套字段

我有默认字段和一个条件，如果选择了一个选项即显示更多字段。火箭联盟如此

但是，正如您从屏幕截图中看到的那样，实际上只有一个锦标赛排名实例正在切换字段。

所以我的问题是，如何让每个实例都发生变化？

这是我的代码：

$(document).on("change", ".ts_select", function(event) {
  if (this.value == '1') {
    $('#default-fields').hide()
    $('#rocket-fields').show()
  } else {
    $('#default-fields').show()
    $('#rocket-fields').hide()
  }
})

<div id="default-fields" class="grid grid-cols-1 md:grid-cols-4">
    <%= render partial: "tournaments/fpartials/default", tournament: @tournament, locals: { f: f } %>
  </div>

  <div id="rocket-fields" class="grid grid-cols-1 md:grid-cols-4 hidden">
    <%= render partial: "tournaments/fpartials/rocket_league_fields", tournament: @tournament, locals: { f: f } %>
  </div>

Answer 1

您正在使用的 jQuery 选择器会选择第一个匹配的 HTML 元素。因此，在您的情况下，您选择的是 ID 为 'default-fields' 和 'rocket-fields'.

的第一个 div

假设您的所有团队字段都包含在具有这些 ID 的 div 中，您可以使用不同的选择器来查找 all 个实例：

$("[id='default-fields']").hide();
$("[id='default-fields']").show();

如果您想了解有关选择器工作原理的更多信息，请查看 jQuery documentation。

Answer 2

在 html 中，您有 id，它们是唯一的，并且只在一个页面上出现一次，并且您有 classes。在您的情况下，您似乎正在使用 id 来重复元素。

虽然这在视觉上可能有效，但在发布表单时您会遇到问题（因为在收集表单数据时仅收集假定的唯一元素）。

所以最好的解决方案是改用类，并相应地调整您的代码。

$(document).on("change", ".ts_select", function(event) {
  if (this.value == '1') {
    $('.default-fields').hide()
    $('.rocket-fields').show()
  } else {
    $('.default-fields').show()
    $('.rocket-fields').hide()
  }
})

jQuery 触发嵌套形式的所有实例 rails 茧

jQuery trigger all instances on a nested form rails cocoon

ruby

jquery

ruby-on-rails

cocoon-gem