结合重复的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({ 
     //... 
    }); 
}