Javascript 单击jquery上运行的函数。单击?
我试图在显示和隐藏元素之间创建一个切换函数。这是我的密码:Javascript 单击jquery上运行的函数。单击?,javascript,jquery,Javascript,Jquery,我试图在显示和隐藏元素之间创建一个切换函数。这是我的密码: $(document).ready(function() { (...) Code for forms (...) $("#hide").click( HideAll() ); } function HideAll() { $("#course").hide(); $("#students").hide(); $("#hide").text("Show course"); $("#h
$(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").click( HideAll);
然后
但更好的解决方案可能是使用
您需要将函数作为引用传递:
$(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);
}
当前代码立即调用每个函数,并将结果分配给相应的单击处理程序,该处理程序以循环结束。使用
将处理程序附加到元素的事件。处理程序被执行
每个事件类型的每个元素最多一次
无需在每次显示和隐藏内容时绑定/取消绑定单击事件。可以使用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");
}
如果我可以提出不同的建议:
$(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());
});
这会将代码合并到一个对象hideShow
,该对象带有一个布尔值show
,它将确定发生哪一系列事件。单击#hide
,它将切换布尔值并应用适当的函数。这样可以避免两次编写几乎相同的代码,并将所有内容封装起来,这样就不会出现逻辑碎片。最好将这些内容都放在document.ready()中,因为在设置这些变量时,元素可能还不存在。
$(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);
}
$(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());
}
$(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");
}
$(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());
});