所以我有一个页面,点击按钮后,它会打开一个嵌套字段,我想在点击时隐藏文件中的一个 div,但到目前为止我的功能不起作用。
我的js文件
$('body').on('click', '#main-applicant-btn', function() {
event.stopPropagation();
var prependData = $('.main-applicant').children().first().clone();
prependData.find("div.checkbox").replaceWith( $( "div.checkbox.hide" ));
var prependedData = $('.main-applicant').children().last();
var list = document.getElementsByClassName("main-applicant");
list.insertBefore(prependData, prependedData);
})
我的申请者.html.erb 文件
<div class="form-group">
<%= f.link_to_add "", :applicant_commitments, :class => "glyphicon glyphicon-plus-sign pointer add", :id => "main-applicant-btn", :data => {:target => "#main-applicant-#{rand}"} %>
</label>
</div>
<span id="main-applicant-<%= rand %>" class="main-applicant">
<%= f.simple_fields_for :applicant_commitments do |applicant_commitment| %>
<%= render "existing_commitment_fields", {:f => applicant_commitment, :instalment => true, :type => 'existing_commitment_applicant'} %>
<% end %>
</span>
我的嵌套字段 existing_commitment_fields.html.erb
<div class="form-group monthly-instalment-lender-checkbox">
<div class="col-sm-3" id="checkbox-existing-fields">
<div class="checkbox">
<label>
<span>Joint Name</span>
<%= f.input_field :joint_name, as: :boolean, class: "joint-name-commitment" %>
</label>
</div>
</div>
</div>
因此,单击时我想要
main-applicant-btn
,当它显示nested_fields 时,我将隐藏 div.checkbox
但到目前为止,当我尝试此代码时,我收到错误 .insertBefore() is not a function。任何人都知道如何在加载后附加或强制 javascript 运行代码?
最佳答案
insertBefore
是一个 Node 方法。
document.getElementsByClassName()
方法返回一个 HTMLCollection 。
你必须遍历这个 HTMLCollection 或者选择其中的一个元素来实际接触节点并使用它们的方法:list[0].insertBefore(...,...)
此外,正如@nnnnnn 所提到的,“insertBefore()
方法不期望 jQuery 对象作为参数。”。
因此,要么使用像 document.querySelector('')
这样的普通 javascript 方法,要么调用 jQuery 对象的目标( $(...)[0]
)
关于javascript - .insertBefore() 不是函数 javascript,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32877264/