jQuery触发嵌套表单rails cocoon上的所有实例答案

【问题标题】：jQuery trigger all instances on a nested form rails cocoonjQuery触发嵌套表单rails cocoon上的所有实例
【发布时间】：2020-10-10 19:40:23
【问题描述】：

我有一个表单，下面是使用 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>

【问题讨论】：

标签： jquery ruby-on-rails ruby cocoon-gem

【解决方案1】：

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

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

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

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

【讨论】：

虽然这在视觉上可能有效，但在具有非唯一 id 的表单中使用重复的 html 元素会导致问题（因为 id 应该是唯一的）。

【解决方案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()
  }
})

【讨论】：

是的，这是一个比我更好的答案。