先聲明下這個方法的使用場合,以免誤導大家。
例如在部落格園,我們沒辦法修改他的原始碼,
那麼只能想辦法監視元素的出現了。
所以下面方法是在修改不了原始碼的情況下使用,而非寫自己的項目。
今天在改博客幾個樣式的時候,以為很自然的加上js就可以實現了,
沒想到那個是ajax加載的數據,而非頁面首次加載的,
例如下面的「提交評論」 按鈕,右側的搜尋按鈕等。
我很自然的寫了
1 $("#btn_comment_submit").removeClass("comment_btn").addClass("btn"); //提交按鈕
2 $(".div_my_zzk").addClass("input-append"); //搜尋框
3 $(".btn_my_zzk").removeClass("btn_my_zzk").addClass("btn"); //搜尋按鈕
可是刷新頁面後發現有點不對,看了network 後發現是ajax 過來的,
無奈,除了自己寫模版之外,只能自己想辦法修改程式碼了。
那麼以下就是我想到的等待元素出現方法。
雖然是基於 jQuery 的,但是程式碼很簡潔,可以修改成純js版的。
程式碼如下:
<. times interval>var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //選擇器
_iIntervalID; //定時器id
if( this.length ){ //如果已經取得了,就直接執行函數
func && func.call(this) ;
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times
_self = $(_selector); //再選擇
if( _self.length ) { //判斷是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this
}
} >
使用方法當然也很簡單,只有3個參數。
func 是回呼函數,就是指定元素出現後就執行的函數。
times 是偵測次數,預設是-1,一直偵測到出現為止。
interval 是偵測間隔,預設 20 毫秒一次。
我們修改下之前的程式碼
$("#btn_comment_submit").wait(function() { //等待#btn_comment_submit元素的載入
this.removeClass("comment_btn").addClass("btn"); //提交按鈕
///這裡的this 就是$("#btn_comment_submit")
});
$("#widget_my_zzk").wait(function() { //等待#widget_my_zzk元素的載入
$( ".div_my_zzk").addClass("input-append"); //搜尋框
$(".btn_my_zzk").removeClass("btn_my_zzk").addClass("btn"); //搜尋按鈕
});
是不是很簡單、、
當然,依然不破壞jQuery的鍊式結構,你依然可以$("#id").wait(function (){}).hide();
但是後來想想,元素都沒加載,繼續鏈下去也沒意義,不過算了,不改了,就這樣吧。呵呵 :-) 最後說點,我經驗尚淺,如果那裡寫的不對,還請各位大俠指點。