无法使用 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)
  });
});
`