无法使用JQuery显示/隐藏离复选框最近的div

Question

我使用Ruby on Rails和Cocoon Gem生成动态表单。使用表单用户可以添加/删除他们的教育详细信息。

我的表格是这样的：

<div class='nested-fields'>
<div class='row'>
<div class='col-md-6 col-sm-6'>
<div class="form-group">
<%= hidden_field_tag :redirect_to, :edit_education_path %>
<%= f.label :institution_name, 'Institution Name'  %>
<div class="input-with-icon">
<%= f.text_field :institution_name, placeholder: 'Enter Institution Name ', class: 'form-control', required: true %>
<i class="theme-cl ti-home"></i>
</div>
</div>
</div>
<div class='col-md-6 col-sm-6'>
<div class="form-group">
<%= f.label :course_name, 'Course Name'  %>
<div class="input-with-icon">
<%= f.text_field :course_name, placeholder: 'Enter Course Name', class: 'form-control', required: true %>
<i class="theme-cl ti-mobile"></i>
</div>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-6 col-sm-6'>
<div class="form-group">
<%= f.label :course_completed, 'Course Complete'  %>
<div class="input-with-icon">
<%= f.check_box :course_completed, class: 'form-control checkbox' %>
</div>
</div>
</div>
<div class='col-md-6 col-sm-6 finished_year'>
<div class="form-group">
<%= f.label :finished_year, 'Finished Year (optional)'  %>
<div class="input-with-icon">
<%= f.select :finished_year, WorkExperiencesHelper.years, { prompt: '-- Select --' }, class: 'form-control' %>
<i class="theme-cl ti-mobile"></i>
</div>
</div>
</div>
</div>
<div class='row expected_finished_time'>
<div class='col-md-6 col-sm-6'>
<div class="form-group">
<%= f.label :expected_finished_month, 'Expected Finished Month (optional)'  %>
<div class="input-with-icon">
<%= f.select :expected_finished_month, WorkExperiencesHelper.months, { prompt: '-- Select --' }, class: 'form-control' %>
<i class="theme-cl ti-mobile"></i>
</div>
</div>
</div>
<div class='col-md-6 col-sm-6'>
<div class="form-group">
<%= f.label :expected_finished_year, 'Expected Finished Year (optional)'  %>
<div class="input-with-icon">
<%= f.select :expected_finished_year, WorkExperiencesHelper.years, { prompt: '-- Select --' }, class: 'form-control' %>
<i class="theme-cl ti-mobile"></i>
</div>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-12 col-sm-12'>
<div class="form-group">
<%= f.label :course_highlights, 'Course Highlights (optional)' %>
<%= f.text_area :course_highlights, rows: 10, placeholder: 'Add activities, projects, awards or achievements during your study.', class: 'form-control'  %>
</div>
</div>
</div>
<%= link_to_remove_association  f, class: 'btn btn-danger' do %>
<i class="fa fa-trash"></i> Delete
<% end %>
</div>
<script>
$(document).ready(function() {
$(".expected_finished_time").hide();
$(".checkbox").change(function() {
if (this.checked) {
$(".expected_finished_time").hide();
$(".finished_year").show();
} else {
$(".expected_finished_time").show();
$(".finished_year").hide();
}
});
});
</script>

默认情况下，复选框处于选中状态。我想得到的是，当用户取消选中复选框时，.finished_year类的最近div应该被隐藏，.expected_finished_year类的最接近div应该显示给用户。在我当前的代码中，.finished_year类的所有div都被隐藏了。但我只想隐藏离复选框最近的div。我的Jquery看起来像这样：

<script>
$(document).ready(function() {
$(".expected_finished_time").hide();
$(".checkbox").change(function() {
if (this.checked) {
$(".expected_finished_time").hide();
$(".finished_year").show();
} else {
$(".expected_finished_time").show();
$(".finished_year").hide();
}
});
});
</script>

我尝试过使用(this).parent().closest('.finished_year').hide()，但这也不起作用。Cocoon Gem允许同时添加多个教育详细信息。因此，在任何给定的时间，表单中都可能有多个复选框。当用户选中/取消选中复选框时，我希望最接近的div隐藏/显示。

Answer 1

我建议您在找到正确的父后切换

$(function() {
$(".expected_finished_time").hide();
$(".checkbox").on("click", function() {
const $row = $(this).closest(".row");
const chk = this.checked;
$(".expected_finished_time", $row).toggle(!chk)
$(".finished_year", $row).toggle(chk)
});
});
`