6

私がこれを持っていると仮定します（$ = jquery）：

 $.fn.my_function = function() {
    function foo() 
    { 
       //do something 
    };

    function bar() 
    { 
       //do something other
    };

 }

私はこれをネギで笑います$('.my_class').my_function();

今、私は特定のイベントへのコールバックでfooとbarを呼び出す必要があります。

どうすればそれらを呼び出すことができますか？

4

4 に答える 4

7

どういうわけか、それらを「外の世界」にさらす必要があります。現在、それらは内部にのみ表示されるmy_functionため、他の場所から呼び出すことはできません。

これを修正する最も素朴な方法は、次のようになります。

var foo;
var bar;
$.fn.my_function = function() {
    foo = function() {
       //stuff
    };
    bar = function() {
       //stuff
    };
};

同じ概念を適用して、使用法に適した場所にそれらへの参照を配置することができます。

于 2009-11-13T14:26:07.813 に答える
7

jQueryプラグインを構築しようとしているようです。プラグインのメソッドをプライベートスコープに制限する必要があります。また、jQueryセレクターによってプラグインに与えられた要素を繰り返し処理し、jQueryの「each」を使用してそれらを返し、チェーン機能を維持する必要があります。

// wrap the plugin code inside an anonymous function 
// to keep the global namespace clean   
(function($){
    $.fn.my_function = function() {
        return this.each(function(){
            function foo() {
                // stuff here
            }
            function bar() {
                // stuff here
            }
            // now you can use your foo and bar which ever way you want
            // inside the plugin
            $(this).focus(function(event){
                // do some stuff
                ...
                // call the function defined previously in the plugin code
                foo(); 
            });
            $(this).blur(function(event){
                // do some stuff
                ...
                // call the function defined previously in the plugin code
                bar();
            });
        });
    };
})(jQuery);

jQueryプラグイン開発の詳細については、次の記事を参照してください。http: //www.learningjquery.com/2007/10/a-plugin-development-pattern

http://docs.jquery.com/Plugins/Authoring

ただし、「ユーティリティ」タイプの関数をいくつか実行している場合は、次のようにそれらをjQuery名前空間に関連付けることができます。

$.foo = function(){
         // do stuff
    };
$.bar = function(){
        // do stuff
    };
于 2009-11-13T17:24:54.980 に答える
2

HTML

<p id="hello">aaa</p>
<p id="hola">sss</p>
<div id='result'></div>

JS

$.fn.my_function = function() 
{
    this.foo = function(xref) {
       $("#result").append("<div>"+xref+".foo " + $(this).html() +"</div>");
    };

    this.bar = function(xref) {
       $("#result").append("<div>"+xref+".bar " + $(this).html() +"</div>");
    };

    return this;
};

var ee1 = $("#hello").my_function();
var ee2 = $("#hola").my_function();

ee1.bar("ee1");
ee2.bar("ee2");
$("#hello").html("hello hellboy");
ee1.foo("ee1");
ee2.foo("ee2");
$("#result").append("<hr />");
ee1.bar("ee1");
ee2.bar("ee2");
$("#hola").html("hola hellboy");
ee1.foo("ee1");
ee2.foo("ee2");
于 2009-11-13T14:47:30.993 に答える
0

この状況を処理する別の方法は、プラグインのメソッドを他の場所（おそらく別のファイルなど）から呼び出したい場合に役立ちます。プラグインロジックをクラスとして記述し、そのクラスをjQueryプラグイン内にインスタンス化して、インスタンスを保存します。で$.data。

(function($) {

  var Animal = function(el, settings) {
    this.$el = $(el);
    this.settings = settings;

    this.foo();
  };

  Animal.prototype.eat = function() {
    // Do stuff
    if (this.settings.isVegetarian) {
      console.log('I eat plants');
    } else {
      console.log('I eat meat');
    }
  };

  Animal.prototype.play = function() {
    // Do other stuff but return this.$el so you can maintain chain
    return this.$el;
  };

  // Create jQuery plugin
  var pluginName = 'myPlugin';

  $.fn[pluginName] = function(options) {
    // Defaults
    var settings = $.extend({
      isVegetarian: true,
    }, options );

    return this.each(function() {
      if (!$.data(this, pluginName)) {
        // Store plugin instace with element (this), 
        // so public methods can be called later: 
        // $('.el').data('myPlugin').eat();
        $.data(this, pluginName, new Animal(this, settings));
      }
    });
  };

}(jQuery));

次に、プラグインを呼び出したい場合は、通常どおりです。

$('.dog).myPlugin();

そしてメソッドを呼び出します：

$('.dog').data('myPlugin').eat();
于 2016-10-14T00:20:59.897 に答える