Question

我正在为滑块使用jquery插件。它包含一个pauseSlide函数，我试图从外面调用它。这是插件：

(function ($) {
    $.fn.liteSlider = function (options) {

        var defaults = {
            content: '.content',
            width: 500,
            height: 250,
            autoplay: false,
            delay: 3,
            buttonsClass: '',
            activeClass: '',
            controlBt: '',
            playText: ' Play',
            pauseText: 'Pause'
        };

        var options = $.extend(defaults, options);

        var slideNo = 1;
        var timer = 0;
        var playStatus = options.autoplay;
        var thisClass = ($(this).attr('class')).split(' ');
        var theClass = '.' + thisClass[0];
        var count = 0;
        var slides;
        var currentSlide = 1;
        var delay = parseInt(options.delay) * 1000;

        $(this).children(options.content).each(function () {
            slides = ++count;
        });

        function wrapContent(ele) {
            ele.wrap('<div class="sliderContentsWrap" />');
        }

        function applyCss(ele) {
            $('.sliderContentsWrap').css({
                padding: 0,
                margin: 0,
                width: options.width,
                height: options.height,
                overflow: 'hidden',
                position: 'relative'
            });

            ele.css({
                padding: 0,
                margin: 0,
                width: options.width * slides,
                height: options.height,
                position: 'absolute'
            });

            ele.children(options.content).css({
                float: 'left',
                width: options.width,
                height: options.height
            });
        }

        function resetButtons() {
            i = 0;
            $('.' + options.buttonsClass).each(function () {
                i++;
                $(this).addClass('bt' + i);
                $(this).attr('rel', i);
            });
        }

        function goToSlide(theSlide) {

            var animateLeft = -(options.width) * (parseInt(theSlide) - 1);
            $('.sliderContentsWrap' + ' ' + theClass)
                .animate({
                left: animateLeft
            });

            $('.' + options.buttonsClass).each(function () {
                $(this).removeClass(options.activeClass);
                if ($(this).hasClass('bt' + theSlide)) {
                    $(this).addClass(options.activeClass)
                }
            });

            currentSlide = theSlide;
        }

        function autoplay() {
            if (currentSlide < slides) {
                goToSlide(parseInt(currentSlide) + 1);
            } else {
                goToSlide(1);
            }
        }

        function playSlide() {
            clearInterval(timer);
            timer = setInterval(function () {
                autoplay();
            }, delay);

            $(options.controlBt).text(options.pauseText);
            playStatus = true;
        }

        function pauseSlide() {
            clearInterval(timer);
            $(options.controlBt).text(options.playText);
            playStatus = false;
        }

        function init(ele) {
            wrapContent(ele);
            applyCss(ele);
            resetButtons();

            if (options.autoplay == true) {
                playSlide()
            } else {
                pauseSlide();
            }
        }

        return this.each(function () {
            init($(this));

            $('.' + options.buttonsClass).click(function (e) {
                e.preventDefault();
                pauseSlide();
                goToSlide($(this).attr('rel'));
            });

            $(options.controlBt).click(function (e) {
                e.preventDefault();
                if (playStatus == true) {
                    pauseSlide()
                } else {
                    playSlide()
                };
            });

        });

    };

    //added this
    $.liteSlider = {
        pause: function() {
            alert('clicked');
            pauseSlide();
        }
    };   

})(jQuery);

除此之外，我使用$.liteSlider.pause();显示警报，但它不会运行pauseSlide()功能。有什么建议吗？

Answer 1

关于jQuery的插件创作，特别是命名空间点： http://docs.jquery.com/Plugins/Authoring#Namespacing

[...]你应该在对象文字中收集所有插件的方法并通过将方法的字符串名称传递给插件来调用它们。 [...]

(function($) {
    var YourPluginMethods = {
        init: function (options) {
            return this.each(function () {

            });
        },
        pauseSlide : function(options) {
            return this.each(function () {
                // Do some stuff for each instance of your plugin here
            });
        }
    };

    $.fn.YourPlugin = function(method) {        
        // Method calling logic
        if (YourPluginMethods[method]) {
            return YourPluginMethods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (!method || typeof method === 'object') {
            return YourPluginMethods.init.apply(this, arguments);
        } else {
            $.error('Method ' +  method + ' does not exist on jQuery.YourPlugin');
        }
    };
})(jQuery);

$('your-selector').YourPlugin('pauseSlide', {
    speed: 'slow'
});

一旦您以这种方式声明了方法，您就可以在任何HTML选择器上调用它。

Answer 2

问题是对pauseSlide的调用与声明的范围不同。

Answer 3

pauseSlide超出了范围。一个简单的方法可能是在范围内的某处声明var pauseSlide;，然后再分配它。

(function ($) {
    var pauseSlide;

    $.fn.liteSlider = function (options) {

        var defaults = {
            content: '.content',
            width: 500,
            height: 250,
            autoplay: false,
            delay: 3,
            buttonsClass: '',
            activeClass: '',
            controlBt: '',
            playText: ' Play',
            pauseText: 'Pause'
        };

        var options = $.extend(defaults, options);

        var slideNo = 1;
        var timer = 0;
        var playStatus = options.autoplay;
        var thisClass = ($(this).attr('class')).split(' ');
        var theClass = '.' + thisClass[0];
        var count = 0;
        var slides;
        var currentSlide = 1;
        var delay = parseInt(options.delay) * 1000;

        $(this).children(options.content).each(function () {
            slides = ++count;
        });

        function wrapContent(ele) {
            ele.wrap('<div class="sliderContentsWrap" />');
        }

        function applyCss(ele) {
            $('.sliderContentsWrap').css({
                padding: 0,
                margin: 0,
                width: options.width,
                height: options.height,
                overflow: 'hidden',
                position: 'relative'
            });

            ele.css({
                padding: 0,
                margin: 0,
                width: options.width * slides,
                height: options.height,
                position: 'absolute'
            });

            ele.children(options.content).css({
                float: 'left',
                width: options.width,
                height: options.height
            });
        }

        function resetButtons() {
            i = 0;
            $('.' + options.buttonsClass).each(function () {
                i++;
                $(this).addClass('bt' + i);
                $(this).attr('rel', i);
            });
        }

        function goToSlide(theSlide) {

            var animateLeft = -(options.width) * (parseInt(theSlide) - 1);
            $('.sliderContentsWrap' + ' ' + theClass)
                .animate({
                left: animateLeft
            });

            $('.' + options.buttonsClass).each(function () {
                $(this).removeClass(options.activeClass);
                if ($(this).hasClass('bt' + theSlide)) {
                    $(this).addClass(options.activeClass)
                }
            });

            currentSlide = theSlide;
        }

        function autoplay() {
            if (currentSlide < slides) {
                goToSlide(parseInt(currentSlide) + 1);
            } else {
                goToSlide(1);
            }
        }

        function playSlide() {
            clearInterval(timer);
            timer = setInterval(function () {
                autoplay();
            }, delay);

            $(options.controlBt).text(options.pauseText);
            playStatus = true;
        }

        pauseSlide = function() {
            clearInterval(timer);
            $(options.controlBt).text(options.playText);
            playStatus = false;
        }

        function init(ele) {
            wrapContent(ele);
            applyCss(ele);
            resetButtons();

            if (options.autoplay == true) {
                playSlide()
            } else {
                pauseSlide();
            }
        }

        return this.each(function () {
            init($(this));

            $('.' + options.buttonsClass).click(function (e) {
                e.preventDefault();
                pauseSlide();
                goToSlide($(this).attr('rel'));
            });

            $(options.controlBt).click(function (e) {
                e.preventDefault();
                if (playStatus == true) {
                    pauseSlide()
                } else {
                    playSlide()
                };
            });

        });

    };

    //added this
    $.liteSlider = {
        pause: function() {
            alert('clicked');
            pauseSlide();
        }
    };

Javascript调用函数内的函数

3 个答案: