結合重複的jQuery功能

Question

我使用Wordpress插件高級Ajax頁面加載器。爲了在ajax頁面加載後重新加載腳本，我正在使用此重新加載代碼來重新加載圖像滑塊。

var metaslider_804 = function(jQuery) { 
     jQuery('#metaslider_804').flexslider({ 
      slideshowSpeed:6000, 
      animation:"fade", 
      controlNav:false, 
      directionNav:true, 
      pauseOnHover:true, 
      direction:"horizontal", 
      reverse:false, 
      animationSpeed:600, 
      prevText:"<", 
      nextText:">", 
      easing:"swing", 
      slideshow:true, 
      useCSS:false 
     }); 
    }; 
    var timer_metaslider_804 = function() { 
     var slider = !window.jQuery ? window.setTimeout(timer_metaslider_804, 100) : !jQuery.isReady ? window.setTimeout(timer_metaslider_804, 100) : metaslider_804(window.jQuery); 
    }; 
    timer_metaslider_804(); 

由於我使用在不同的頁面不同的滑塊我重複上面的代碼對於每個滑塊，通過僅改變所述滑塊ID。例如。改變ID 804到824

var metaslider_824 = function(jQuery) { 
     jQuery('#metaslider_824').flexslider({ 
      slideshowSpeed:6000, 
      animation:"fade", 
      controlNav:false, 
      directionNav:true, 
      pauseOnHover:true, 
      direction:"horizontal", 
      reverse:false, 
      animationSpeed:600, 
      prevText:"<", 
      nextText:">", 
      easing:"swing", 
      slideshow:true, 
      useCSS:false 
     }); 
    }; 
    var timer_metaslider_824 = function() { 
     var slider = !window.jQuery ? window.setTimeout(timer_metaslider_824, 100) : !jQuery.isReady ? window.setTimeout(timer_metaslider_824, 100) : metaslider_824(window.jQuery); 
    }; 
    timer_metaslider_824(); 

雖然這設置工作，它似乎並不喜歡這樣做的最好方式，尤其是因爲我使用8​​個滑塊。有沒有更好的做到這一點？例如：

$sliderIDs = "804, 824, xxx, xxx, etc" 

var metaslider_$sliderIDs = function(jQuery) { 
    jQuery('#metaslider_$sliderIDs').flexslider({ 
     slideshowSpeed:6000, 
     animation:"fade", 
     controlNav:false, 
     directionNav:true, 
     pauseOnHover:true, 
     direction:"horizontal", 
     reverse:false, 
     animationSpeed:600, 
     prevText:"<", 
     nextText:">", 
     easing:"swing", 
     slideshow:true, 
     useCSS:false 
    }); 
}; 
var timer_metaslider_$sliderIDs = function() { 
    var slider = !window.jQuery ? window.setTimeout(timer_metaslider_$sliderIDs, 100) : !jQuery.isReady ? window.setTimeout(timer_metaslider_$sliderIDs, 100) : metaslider_$sliderIDs(window.jQuery); 
}; 
timer_metaslider_$sliderIDs(); 

Answer 1

有兩種可能性。

嘗試給這些#metaslider_...元素中的每一個元素設置一個通用類，如myslider。然後調用這樣的插件：

jQuery('.myslider').flexslider({ 
    //... 
}); 

我在這個插件的代碼看，並呼籲無論你選擇了一個$.each，所以理論上這應該工作。 （見this example。）

你的另一個選擇是把每一個獨特的ID到一個數組，遍歷它，就像這樣：

var slider_ids = [804, 824, ...]; 

for (var i = 0, len = slider_ids.length; i < len; i++) { 
    jQuery('#metaslider_' + slider_ids[i]).flexslider({ 
     //... 
    }); 
}