[英]Click function running on jquery.click?
I'm trying to create a toggle function between showing and hiding elements. 我正在尝试在显示和隐藏元素之间创建一个切换功能。 Here is my code:
这是我的代码:
$(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());
}
With HTML structured like so: 使用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>
With break points in my script, it was revealed to me that my #hide's click function was being called on the line in the $(document).ready function, then it continuous loops without waiting for clicks. 在我的脚本中有断点,向我透露我的#hide的click函数是在$(document).ready函数的行上调用的,然后它连续循环而不等待点击。 Is there either a problem with my implementation or an error with my code?
我的实现有问题或我的代码有错误吗? I haven't quite figured it out.
我还没弄明白。
In case it helps, here is a callstack of when #hide's click function is called: 如果它有帮助,这里是一个调用#hide的click函数的callstack:
DOMContentLoaded
$.extend.ready
$.Callbacks.self.fireWith
$.Callbacks.fire
(anonymous function)
Thanks for your time. 谢谢你的时间。
You need to pass the function references to click function 您需要将函数引用传递给click函数
$("#hide").click( HideAll);
then 然后
$("#hide").off('click').click(ShowAll);
But a better solution could be to use .one() 但更好的解决方案是使用.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);
}
If I might offer a different recommendation: 如果我可以提供不同的建议:
$(document).ready(function() {
var $hide = $('#hide'),
$courseStudents = $('#course,#students'),
hideShow = {
show:true,
apply:function() {
var self = this;
if(self.show){
self.show = false;
$courseStudents.hide();
$hide.text("Show course");
} else {
self.show = true;
$courseStudents.show();
$hide.text("Hide course");
}
}
};
(...) Code for forms (...)
$hide.on('click',hideShow.apply());
});
This consolidates your code into an object hideShow
with a boolean show
which will determine which series of events occur. 这
hideShow
您的代码整合到一个带有布尔show
的对象hideShow
,该布尔show
将决定发生哪一系列事件。 On click of #hide
, it will switch the boolean and apply the appropriate functions. 单击
#hide
,它将切换布尔值并应用适当的函数。 This saves writing nearly identical code twice, and encapsulates everything so there isn't fragmentation of logic. 这样可以节省两次完全相同的代码,并封装所有内容,因此不存在逻辑碎片。
You need to pass the functions as references: 您需要将函数作为引用传递:
$(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);
}
Your current code is immediately invoking each function and assigning the result to the respective click
handler, which is ending up in a loop. 您当前的代码会立即调用每个函数并将结果分配给相应的
click
处理程序,该处理程序最终会循环。
Attach a handler to an event for the elements.
将处理程序附加到元素的事件。 The handler is executed at most once per element per event type.
每个事件类型的每个元素最多执行一次处理程序。
$(document).ready(function() {
// (...) Code for forms (...)
$("#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());
}
There's no need to bind/unbind click events each time you show and hide stuff. 每次显示和隐藏内容时都无需绑定/取消绑定点击事件。 You can have the onclick function determine whether to show or hide:
您可以让onclick函数确定是显示还是隐藏:
$(document).ready(function () {
/*(...) Code for forms (...)*/
$("#hide").on('click', function(){
if($("#course").is("visible")){
HideAll;
} else {
ShowAll;
}
});
}
function HideAll() {
$("#course,#students").hide();
$("#hide").text("Show course");
}
function ShowAll() {
$("#course,#students").show();
$("#hide").text("Hide course");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.