javascript - JQuery .show() 方法在 .hide 之后不起作用

Question

我正在使用一个 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">&nbsp;&nbsp;Admin Controls</div></div>

Answer 1

我强烈建议只使用 .toggle()而不是为此。这样就大大缩短了代码。此外，如果需要，您可以通过为所有这些元素赋予相同的类来进一步优化它。

$(".adminCheckbox").click(function(){

    $(".deleteImageButton, .addHeading, .deleteHeadingButton, .fileUpload, .fileUploadSubmit").toggle();

}); 

您还可以为切换放置一个数字值以在隐藏和显示时执行动画，例如 .toggle(500)