Javascript 在jQuery插件内调用函数时出错

我正在开发一个jQuery插件，当我点击一个暂停链接时，我需要调用插件中的一个函数。我的代码是这样的

$("#pauseAnimation").click(function () { $.fn.cjImageVideoPreviewer().pauseAnimation(); })

要调用的函数是

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

    var settings = {
        // user editable settings
        images: [],
        delay: 1000,
        autoPlay: false,
        showProgress: false
    };

    var sys = {
        // function parameters
        version: '1.0.2',
        elem: null,
        idx: 1,
        timer: null,
        loaded: 0,
        mouseX: null,
        mouseY: null,
        state: false
    };

    /*
        handle transitions
    ***************************************/

    function clearTimer() {
        if (sys.timer !== null) {
            window.clearTimeout(sys.timer);
            sys.timer = null;
        }
    }

    // reset everything
    function stopAnimation() {

        if (sys.state) {

            clearTimer();
            sys.idx = 0;
            sys.state = false;

            // show the first image
            $(sys.elem).find("div.cjImageVideoPreviewer img:first").css({
                "display": "block"
            });

            // hide all the other images
            $(sys.elem).find("div.cjImageVideoPreviewer img:not(:first)").css({
                "display": "none"
            });
        }
    }

    // pause
    function pauseAnimation() {

        if (sys.state) {

            clearTimer();
            sys.idx = 0;
            sys.state = false;
        }
    }

当我点击链接时，会出现如下错误

Microsoft JScript运行时错误：对象不支持此属性或方法 任何帮助都是值得的

---

您最好将嵌套函数指定给以下变量：

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

        var do_stuff = function() {
            alert('do_stuff!')

            var do_other_stuff = function() {
                alert("do_other_stuff");
            };

            return {
                do_other_stuff: do_other_stuff
            };
        };

        return {
            do_stuff: do_stuff
        }
    };
})(jQuery);

$.fn.foo().do_stuff();
$.fn.foo().do_stuff().do_other_stuff();

//Init your plugin with some options
$('#pauseAnimation').cjImageVideoPreviewer({option1: 'value1', option2: 'value2'});
// then call a method like this:
$('#pauseAnimation').cjImageVideoPreviewer('pauseAnimation');

享受吧

编辑：

或者，您可以这样做：

$.fn.foo = {
    do_stuff : function() {
        alert("do_stuff!");
    }
};

$.fn.foo.do_stuff();

在JQuery中，建议使用以下方法创建插件：

(function( $ ){

  var methods = {
     init : function( options ) {

       return this.each(function(){
         $(window).bind('resize.tooltip', methods.reposition);
       });

     },
     destroy : function( ) {

       return this.each(function(){
         $(window).unbind('.tooltip');
       })

     },
     reposition : function( ) { 
       // ... 
     },
     show : function( ) { 
       // ... 
     },
     hide : function( ) {
       // ... 
     },
     update : function( content ) { 
       // ...
     }
  };

  $.fn.tooltip = function( method ) {

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

  };

})( jQuery );

如果您想使用这种方式创建自定义插件，那么您的插件应该与此类似：

(function( $ ){
  var sys, settings;
  var methods = {
    init : function( options ) {
        //do stuf with options settings
     },
    clearTimer: function () {
        if (sys.timer !== null) {
            window.clearTimeout(sys.timer);
            sys.timer = null;
        }
    },
    stopAnimation: function () {

        if (sys.state) {

            clearTimer();
            sys.idx = 0;
            sys.state = false;

            // show the first image
            $(sys.elem).find("div.cjImageVideoPreviewer img:first").css({
                "display": "block"
            });

            // hide all the other images
            $(sys.elem).find("div.cjImageVideoPreviewer img:not(:first)").css({
                "display": "none"
            });
        }
    },
    pauseAnimation: function () {

        if (sys.state) {

            clearTimer();
            sys.idx = 0;
            sys.state = false;
        }
    }
  };

  $.fn.cjImageVideoPreviewer = function (method) {

    settings = {
        // user editable settings
        images: [],
        delay: 1000,
        autoPlay: false,
        showProgress: false
    };

    sys = {
        // function parameters
        version: '1.0.2',
        elem: null,
        idx: 1,
        timer: null,
        loaded: 0,
        mouseX: null,
        mouseY: null,
        state: false
    };

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

 }
})( jQuery );

然后你可以这样使用它：

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

        var do_stuff = function() {
            alert('do_stuff!')

            var do_other_stuff = function() {
                alert("do_other_stuff");
            };

            return {
                do_other_stuff: do_other_stuff
            };
        };

        return {
            do_stuff: do_stuff
        }
    };
})(jQuery);

$.fn.foo().do_stuff();
$.fn.foo().do_stuff().do_other_stuff();

//Init your plugin with some options
$('#pauseAnimation').cjImageVideoPreviewer({option1: 'value1', option2: 'value2'});
// then call a method like this:
$('#pauseAnimation').cjImageVideoPreviewer('pauseAnimation');

---

希望这能澄清如何开发JQuery插件。

您的

cjImageVideoPreviewer

函数是否返回

此

，因此它是可链接的？您的插件是否公开了任何这些函数？您可能不想将其称为

$.fn.cjImageVideoPreviewer（）。

但称为

$.cjImageVideoPreviewer（））.

。恐怕不行，你可以稍微改变一下你的插件声明，我现在正在编辑我的帖子，你可以在一分钟内看到：）我已经按照你说的做了，但是像“pauseAnimation”sys这样的函数出现了错误。状态在那里不可访问抱歉，你是对的！我编辑了我的答案，修正了它。我忘了将sys和settings变量的声明移到$.fn.cjImageVideoPreviewer函数之外。现在它们在主匿名函数上声明。我还修复了其他一些“复制粘贴”错误。