javascript - How to show hide the element that was selected with closest and find method in JQuery?
问题描述
I have form with check box and text area. If checkbox is check I want to show textarea if not hide. Here is example of what I have:
$(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>
As you can see if I check the checkbox comment textarea is still not showing. I'm not sure if .closest()
and .find()
are methods that support show/hide in this case. Please let me know if you know the way to achieve this. Thank you.
解决方案
$(this).closest('div')
找到第一个父 div,在本例中是具有 class的那个checkbox
-.find(..)
然后查看该 div 的children。由于div class=checkbox
div 没有div class=dc-comment
它的孩子,它没有找到它。
.dc-comment
与 .是同级(同一级别/同一父级).checkbox
。
更改为.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>
推荐阅读
- c# - 为什么服务器看不到 HttpWebRequest 和方法 POST 数据
- sql - 计算日期之间的空值
- symfony - 有没有办法为特定包中的树枝文件更改树枝配置?
- python - python从文件系统读取证书
- react-native - 为什么我的手机上的 React Native AsyncStorage 这么慢?
- python - 斐波那契 - 非常大的 n 数的六个最高有效数字(最右边)
- python - 带有 2 个电子表格选项卡的 Python 连接
- python - 我不知道如何使用不正确的输入进行错误处理
- javascript - CRUD 后重新加载页面
- c++ - 使用基于范围的 for 循环遍历除最后一个元素之外的所有元素