JQuery .show()方法在.hide之后不工作
JQuery .show()方法在.hide之后不工作
提问于 2014-07-19 14:40:23
我正在使用一个JQuery脚本，该脚本允许复选框(其类名为"adminCheckBox")根据是否选中它在屏幕上显示或隐藏各种对象。
隐藏功能运行良好。但是，在隐藏了元素并再次按下复选框之后，元素不会再次出现。究竟为何会这样呢？谢谢。
$(document).ready(function(){
$(".adminCheckbox").click(function(){
if(!document.getElementsByClassName("adminCheckBox").checked){
$(".deleteImageButton").hide(500);
$(".addHeading").hide(500);
$(".deleteHeadingButton").hide(500);
$(".fileUpload").hide(500);
$(".fileUploadSubmit").hide(500);
}else{
$(".deleteImageButton").show();
$(".addHeading").show();
$(".deleteHeadingButton").show();
$(".fileUpload").show();
$(".fileUploadSubmit").show();
}
});
});下面是有关复选框的HTML。
<br><div class="adminControls"><input type="checkbox" class="adminCheckbox" checked="checked"><div class="checkBoxText"> Admin Controls</div></div>回答 5
Stack Overflow用户
回答已采纳
发布于 2014-07-19 14:46:35
为此，我强烈建议只使用.toggle()。用这个方法可以大大缩短代码。此外，如果需要，只需给所有这些元素一个相同的类，就可以进一步优化它。
$(".adminCheckbox").click(function(){
$(".deleteImageButton, .addHeading, .deleteHeadingButton, .fileUpload, .fileUploadSubmit").toggle();
}); 您还可以在隐藏和显示中放置一个数字值，用于切换以执行动画，如.toggle(500)。
Stack Overflow用户
发布于 2014-07-19 14:52:16
使用.toggle()函数隐藏并显示按钮。
并使用.change()事件/处理程序而不是.click()。
根据jQuery API:
当元素的值发生变化时，
change事件将被发送到元素。此事件仅限于<input>元素、<textarea>框和<select>元素。对于选择框、复选框和单选按钮，当用户使用鼠标进行选择时，事件将立即触发，但对于其他元素类型，事件将被推迟到元素失去焦点。
尝试如下：
$(document).ready(function () {
$('.adminCheckbox').on('change', function () {
$(".deleteImageButton, .addHeading, .deleteHeadingButton, .fileUpload, .fileUploadSubmit").toggle(500);
});
});JSFiddle演示
Stack Overflow用户
发布于 2014-07-19 14:51:43
因为document.getElementsByClassName("adminCheckBox")返回一个数组，所以不会定义checked属性。考虑使用document.getElementsByClassName("adminCheckBox")[0]或正确地迭代数组。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24841524
复制相关文章
相似问题
腾讯云开发者
