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({ 
        //...
    });
}

结合重复的jquery函数

1 个答案: