javascript - 如何访问 .each() jQuery 中的插件方法

Question

我正在使用bxSlider在我的网站上。这是我的脚本:

handleBxSlider = function(){
    var initSliders, destroySliders;

    initSliders = function(){
        jQuery('.bxslider').each(function(){
            jQuery(this).bxSlider({
                slideWidth: 5000,
                minSlides: jQuery(this).attr("min-slides") || 4,
                maxSlides: jQuery(this).attr("min-slides") || 5,
                slideMargin: jQuery(this).attr("slide-margin") || 20
            });
        });
    };

    destroySliders = function(){
        initSliders.destroySlider();
    };

    initSliders();
    destroySliders();

};

bxSlider有方法destroySlider();。我需要在 bxSlider's 中创建所有公共(public)方法只需调用 handleBxSlider 即可访问插件。

就像，handleBxSlider.destroySlider(); 销毁 slider ，或 handleBxSlider.initSliders(); 重新初始化 slider 。但 destroySliders(); 不起作用。如何在 initSliders function() 中访问 bxSlider 的公共(public)方法？

或者有什么最好的解决方案吗？

无论如何，这是 fiddle

Answer 1

在 initSliders 中，您只是创建了 bxSlider 并且无法访问内部范围内的对象。我添加了所有 slider 对象所在的数组 sliderArray 。现在，通过调用 destroySliders 您可以销毁 slider 。

handleBxSlider = function () {
    var initSliders, destroySliders, sliderArray = [];

    initSliders = function () {
        jQuery('.bxslider').each(function () {
            var sliderObj = jQuery(this).bxSlider({
                slideWidth: 5000,
                minSlides: jQuery(this).attr("min-slides") || 4,
                maxSlides: jQuery(this).attr("min-slides") || 5,
                slideMargin: jQuery(this).attr("slide-margin") || 20
            });
            sliderArray.push(sliderObj)
        });
    };

    destroySliders = function () {
        for (var i = 0; i < sliderArray.length; i++) {
            sliderArray[i].destroySlider();
        }
    };

    initSliders();
    destroySliders();
};