Question

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

＆＃13;

$('.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");
  }
});

＆＃13;

<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>

＆＃13;

我知道一般if语句有效，因为在console.log("checked")内使用console.log("unchecked")和if时，它可以正常工作。我认为我错误处理了.closest方法，但我无法弄清楚如何/为什么。

编辑：为了澄清，我尝试这样做，当选中复选框时，最接近的.stage-dates div淡入，当它取消选中时淡出。

Answer 1

$.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>

选中复选框时fadeIn / fadeOut最近的div

1 个答案: