[英]Click function running on jquery.click?
我正在嘗試在顯示和隱藏元素之間創建一個切換功能。 這是我的代碼:
$(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函數是在$(document).ready函數的行上調用的,然后它連續循環而不等待點擊。 我的實現有問題或我的代碼有錯誤嗎? 我還沒弄明白。
如果它有幫助,這里是一個調用#hide的click函數的callstack:
DOMContentLoaded
$.extend.ready
$.Callbacks.self.fireWith
$.Callbacks.fire
(anonymous function)
謝謝你的時間。
您需要將函數引用傳遞給click函數
$("#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);
}
如果我可以提供不同的建議:
$(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
的對象hideShow
,該布爾show
將決定發生哪一系列事件。 單擊#hide
,它將切換布爾值並應用適當的函數。 這樣可以節省兩次完全相同的代碼,並封裝所有內容,因此不存在邏輯碎片。
您需要將函數作為引用傳遞:
$(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);
}
您當前的代碼會立即調用每個函數並將結果分配給相應的click
處理程序,該處理程序最終會循環。
使用.one()
將處理程序附加到元素的事件。 每個事件類型的每個元素最多執行一次處理程序。
$(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());
}
每次顯示和隱藏內容時都無需綁定/取消綁定點擊事件。 您可以讓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.