javascript - 在 jquery.click 上运行的单击函数？

Question

我正在尝试创建显示和隐藏元素之间的切换功能。这是我的代码:

$(document).ready(function() {
     (...) Code for forms (...)
     $("#hide").click( HideAll() );
}

function HideAll() {
    $("#course").hide();
    $("#students").hide();
    $("#hide").text("Show course");
    $("#hide").unbind().click(ShowAll());
}

function ShowAll() {
    $("#course").show();
    $("#students").show();
    $("#hide").text("Hide course");
    $("#hide").unbind().click(HideAll());
}  

HTML 结构如下:

<div id="hide">Hide courses</div>
<ul id="course">
    <li><div>CRN:</div><input type="text" id="crn" value="" size="5"/></li>
    <li><div>Prefix:</div><input type="text" id="pre" maxlength="4" value="" size="4"/></li>
    <li><div>Number:</div><input type="text" id="num" maxlength="4" value=""size="4" /></li>
    <li><div>Title:</div><input type="text" id="title" value="" /></li>
    <li><div>Section:</div><input type="text" id="sec" maxlength="2" value=""size="2" /></li>
    <li><div>Year:</div><input type="text" id="year" maxlength="4" value="" size="4"/></li>
</ul>

<div id="students">
    <ul class="student">
        <li><div>RIN:</div><input type="text" class="rin" maxlength="9" value="" size="9"/></li>
        <li><div>First Name:</div><input type="text" class="fname" value="" size="12"/></li>
        <li><div>Last Name:</div><input type="text" class="lname" value="" size="12"/></li>
        <li><div>Address line 1:</div><input type="text" class="ad1" value="" /></li>
        <li><div>Address line 2:</div><input type="text" class="ad2" value="" /></li>
        <li><div>City:</div><input type="text" class="city" value="" /></li>
        <li><div>State:</div><input type="text" class="st" maxlength="2" value="" size="2"/></li>
        <li><div>ZIP:</div><input type="text" class="zip" maxlength="5" value="" size="5"/><input type="text" class="zip4" maxlength="4" value="" size="4"/></li>
        <li><div>Grade:</div><input type="text" class="grade" maxlength="3" value="" size="3"/></li>
    </ul>
</div>

通过我的脚本中的断点，我发现我的 #hide 的单击函数正在 $(document).ready 函数中的行上被调用，然后它连续循环而不等待单击。我的实现有问题还是我的代码有错误？我还没完全弄清楚。

如果有帮助，这里是调用 #hide 的 click 函数时的调用堆栈:

DOMContentLoaded  
$.extend.ready
$.Callbacks.self.fireWith
$.Callbacks.fire
(anonymous function) 

感谢您的宝贵时间。

Answer 1

您需要将函数引用传递给点击函数

$("#hide").click( HideAll);

然后

$("#hide").off('click').click(ShowAll);

但是更好的解决方案可能是使用 .one()

$(document).ready(function () {
    $("#hide").one('click', HideAll);
}

function HideAll() {
    $("#course").hide();
    $("#students").hide();
    $("#hide").text("Show course");
    $("#hide").one('click', ShowAll);
}

function ShowAll() {
    $("#course").show();
    $("#students").show();
    $("#hide").text("Hide course");
    $("#hide").one('click', HideAll);
}