1

我正在使用 Wordpress 插件 Advanced Ajax Page loader。为了在 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();
4

1 回答 1

1

有两种可能性。

#metaslider_...尝试为这些元素中的每一个赋予一个通用类，例如myslider. 然后像这样调用插件：

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

我查看了这个插件的代码，它会调用$.each你选择的任何内容，所以理论上这应该可以工作。（见这个例子。）

您的另一个选择是将每个唯一的 id 放入一个数组并遍历它，如下所示：

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

for (var i = 0, len = slider_ids.length; i < len; i++) {
    jQuery('#metaslider_' + slider_ids[i]).flexslider({ 
        //...
    });
}
于 2013-07-08T16:17:26.387 回答