先聲明下這個方法的使用場合以免誤導大家
比如在博客園我們沒法修改他的源代碼
那麼只能想辦法監視元素的出現了
所以下面方法是在修改不了源碼的情況下使用而非寫自己的項目
今天在改博客幾個樣式的時候以為很自然的加上js就可以實現了
沒想到那個是ajax加載的數據而非頁面首次加載的
比如下面的 “提交評論” 按鈕右側的 搜索按鈕 等
我很自然的寫了
復制代碼 代碼如下:
$("#btn_comment_submit")
removeClass("comment_btn")
addClass("btn"); //提交按鈕
$("
div_my_zzk")
addClass("input
append"); //搜索框
$("
btn_my_zzk")
removeClass("btn_my_zzk")
addClass("btn"); //搜索按鈕
可是刷新頁面後發現有點不對看了 network 後發現是 ajax 過來的
無奈除了自己寫模版之外只能自己想辦法修改代碼了
那麼下面就是我想到的等待元素出現方法
雖然是基於 jQuery 的但是代碼很簡潔可以修改成純js版的
復制代碼 代碼如下:
jQuery
fn
wait = function (func
times
interval) {
var _times = times ||
//
次
_interval = interval ||
//
毫秒每次
_self = this
_selector = this
selector
//選擇器
_iIntervalID; //定時器id
if( this
length ){ //如果已經獲取到了
就直接執行函數
func && func
call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是
就退出
clearInterval(_iIntervalID);
}
_times <=
|| _times
; //如果是正數就
_self = $(_selector); //再次選擇
if( _self
length ) { //判斷是否取到
func && func
call(_self);
clearInterval(_iIntervalID);
}
}
_interval);
}
return this;
}
使用方法當然也很簡單只有個參數
func 是回調函數就是當指定元素出現後就執行的函數
times 是檢測次數默認是一直檢測直到出現為止
interval 是檢測間隔默認 毫秒一次
我們修改下之前的代碼
復制代碼 代碼如下:
$("#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();
但是後來想想元素都沒加載繼續鏈下去也沒意義不過算了不改了就這樣吧呵呵 :)
最後說點我經驗尚淺如果那裡寫的不對還請各位大俠指點
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19959.html
