javascript - 当选中复选框时，fadeIn/fadeOut最接近的div

我有一个带有一些可选字段的表单，除非用户专门启用它们，否则我不想显示这些字段。我正在努力找出jQuery中的.closest()方法，希望能提供一些指导。像这样有多种形式，所以为了DRY我不想给我们一个#id。

$('.enable-stage').change(function() {
  if ($(this).is(':checked')) {
    $(this).closest('.stage-dates').fadeIn("slow").toggleClass("hidden");
  } else {
    $(this).closest('.stage-dates').fadeOut("slow").toggleClass("hidden");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="stage">
  <h3>Stage Name</h3>
  <label><input type="checkbox" class="enable-stage"> Enable Stage</label>
  <div class="stage-dates hidden">
    <input type="date">
  </div>
</div>

我知道一般的if语句是有效的，因为在console.log("checked")中使用console.log("unchecked")和if时，它可以工作。我想我对.closest方法的处理不当，但是我不知道如何/为什么。

编辑：为澄清起见，我正在尝试使它成为可能，以便在选中复选框时，最接近的.stage-dates div淡入，而在未选中它时，淡出。

最佳答案

$.closest()返回所选元素的第一个祖先。它不会搜索整个DOM并返回最接近的匹配项。要在此处使用$.closest()，我们可以找到最接近的label（因为label是该复选框的祖先），然后使用$.next()定位.stage-dates

$('.enable-stage').change(function() {
  var $closest = $(this).closest('label').next('.stage-dates');
  if ($(this).is(':checked')) {
    $closest.fadeIn("slow").toggleClass("hidden");
  } else {
    $closest.fadeOut("slow").toggleClass("hidden");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stage">
    <h3>Stage Name</h3>
    <label><input checked type="checkbox" class="enable-stage"> Enable Stage</label>
    <div class="stage-dates hidden">
        <input type="date">
    </div>
</div>

关于javascript - 当选中复选框时，fadeIn/fadeOut最接近的div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41841931/