如何显示隐藏在 JQuery 中使用 closest 和 find 方法选择的元素？

Question

我有带复选框和文本区域的表单。如果选中复选框，如果不隐藏，我想显示文本区域。这是我所拥有的示例：

$(document).on('click', '.dc-checkbox', setCheckboxVal);

function setCheckboxVal() {
  var fldCheckbox = $(this);
  var fldComment = $(this).closest('div').find('.dc-comment');
  console.log(fldComment);

  if (fldCheckbox.is(':checked')) {
    fldCheckbox.val(1);
    fldComment.show();

  } else {
    fldCheckbox.val(0);
    fldComment.hide();
  }
}

.dc-comment {
  display: none;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<form id="myfrm" method="post">
  <div class="checkbox">
    <label for="checkbox1">
      <input type="checkbox" name="dc_status1" id="dc_status1" class="dc-checkbox"> Checkbox 1</label>
  </div>
  <div class="form-group dc-comment">
    <label for="comment1" class="pull-left">Comment:</label>
    <textarea class="form-control" rows="2" name="dc_comment1" id="dc_comment1"></textarea> </div>
  <div class="checkbox">
    <label for="checkbox2"><input type="checkbox" name="dc_status2" id="dc_status2" class="dc-checkbox" value="1"> Checkbox 2</label>
  </div>
  <div class="form-group dc-comment">
    <label for="comment2" class="pull-left">Comment:</label>
    <textarea class="form-control" rows="2" name="dc_comment2" id="dc_comment2"></textarea>
  </div>
  <div class="checkbox">
    <label for="checkbox4"><input type="checkbox" name="dc_status4" id="dc_status4" class="dc-checkbox"> Checkbox 3</label>
  </div>
  <div class="form-group dc-comment">
    <label for="comment4" class="pull-left">Comment:</label>
    <textarea class="form-control" rows="2" name="dc_comment4" id="dc_comment4"></textarea>
  </div>
</form>

如您所见，如果我选中了复选框，评论文本区域仍然没有显示。在这种情况下，我不确定 .closest() 和 .find() 是否是支持 show/hide 的方法。如果您知道实现此目标的方法，请告诉我。谢谢你。

Answer 1

$(this).closest('div') 找到第一个 parent div，在本例中是 class checkbox - .find(..) 然后查找那个div的child仁。由于 div class=checkbox div 没有 div class=dc-comment 作为它的 child，它找不到它。

.dc-comment 是 .checkbox.

的兄弟姐妹（同级别/相同 parent）

改为.next()或.nextAll(".dc-comment").first()

除非您知道它的作用，否则不要使用 .next(".dc-comment")，因为它可能会损坏（仅在匹配时获取下一个，而不是匹配的下一个）。

更新的代码段：

$(document).on('click', '.dc-checkbox', setCheckboxVal);

function setCheckboxVal() {
  var fldCheckbox = $(this);
  var fldComment = $(this).closest('div').nextAll('.dc-comment').first();
  //console.log(fldComment);

  if (fldCheckbox.is(':checked')) {
    fldCheckbox.val(1);
    fldComment.show();
  } else {
    fldCheckbox.val(0);
    fldComment.hide();
  }
}

.dc-comment {
  display: none;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<form id="myfrm" method="post">
  <div class="checkbox">
    <label for="checkbox1">
      <input type="checkbox" name="dc_status1" id="dc_status1" class="dc-checkbox"> Checkbox 1</label>
  </div>
  <div class="form-group dc-comment">
    <label for="comment1" class="pull-left">Comment:</label>
    <textarea class="form-control" rows="2" name="dc_comment1" id="dc_comment1"></textarea> </div>
  <div class="checkbox">
    <label for="checkbox2"><input type="checkbox" name="dc_status2" id="dc_status2" class="dc-checkbox" value="1"> Checkbox 2</label>
  </div>
  <div class="form-group dc-comment">
    <label for="comment2" class="pull-left">Comment:</label>
    <textarea class="form-control" rows="2" name="dc_comment2" id="dc_comment2"></textarea>
  </div>
  <div class="checkbox">
    <label for="checkbox4"><input type="checkbox" name="dc_status4" id="dc_status4" class="dc-checkbox"> Checkbox 3</label>
  </div>
  <div class="form-group dc-comment">
    <label for="comment4" class="pull-left">Comment:</label>
    <textarea class="form-control" rows="2" name="dc_comment4" id="dc_comment4"></textarea>
  </div>
</form>

如何显示隐藏在 JQuery 中使用 closest 和 find 方法选择的元素？

How to show hide the element that was selected with closest and find method in JQuery?

javascript

jquery

find

show-hide

closest