jQuery触发嵌套表单rails cocoon上的所有实例
Posted
技术标签:
【中文标题】jQuery触发嵌套表单rails cocoon上的所有实例【英文标题】:jQuery trigger all instances on a nested form 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>
【问题讨论】:
【参考方案1】:您正在使用的 jQuery 选择器选择第一个匹配的 html 元素。因此,在您的情况下,您选择的是 ID 为“default-fields”和“rocket-fields”的第一个 div
s。
假设您的所有团队字段都包含在带有这些 ID 的 div
s 中,您可以使用不同的选择器来查找 所有 个实例:
$("[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()
)
【讨论】:
是的,这是一个比我更好的答案。以上是关于jQuery触发嵌套表单rails cocoon上的所有实例的主要内容,如果未能解决你的问题,请参考以下文章
Rails cocoon嵌套字段,在编辑表单上呈现每个字段旁边的现有图像
在 Ruby on Rails 4.2 中使用 Cocoon gem 嵌套表单
<ol> <li> 使用 rails partial 和 cocoon gem 实现的问题