1

連鎖性を維持し、Jquery Plugins/Authoringで指定されているパブリックメソッドを持つJqueryプラグインを作成しようとしています。複雑なのは、パブリックメソッドで使用したい特定の変数を維持しようとしていることです。

これは私のjsfiddleです：http：//jsfiddle.net/badmash69/9cqcj/2/

javascript code :

(function($){

  var methods = {
    init : function( options ) {
      this.options = options;
    }
  , add_that: function (elem) {

      $(this).append(elem);
      return (this);
    }
  , show_parent: function(){
      // this is a simple test to see if the plugin vars are accessible
      alert("parent id=" + $(this).parentId)
    }              
  , add_this: function (elem) {
      return methods.add_that.apply(this,elem);
    }
  };

  $.fn.test = function (method) { 
        var args = method;
        var argss = Array.prototype.slice.call(args, 1);      


      return this.each(function(){

          var $this = $(this);
          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.test' );
    }          


          var element = $(this);
          var parentId= element.parent().attr("id")

      });       


  };

})(jQuery);

$('#test').test('add_this',$('<div>Hello World d</div>'));

$('#test').test('show_parent');
​

HTMLコード

<div id="holder">
<div id="test"></div>
</div>

ここで何が間違ってドーピングされているのか理解できません。どうすればそれを機能させることができますか？助けていただければ幸いです。

4

2 に答える 2

1

これを行う方法は、$。dataを使用することです。特定のオブジェクトのローカル変数、「public」/「private」メソッドなどを使用できます。ここでは、その方法の簡単な例を示します。

(function($){
      var myTestMethods = function() {
          // local variables
          var last_added;

          // local "private" methods 
          var init=function(options) {
              this.options = options;
              last_added = null;
              return this;
          };

          var add_that=function(elem) {
              last_added = elem;
              this.append(elem);
              return this;
          };

          var show_parent=function() {
              alert("parent id=" + this.parent().attr('id'));
          }

          return { // this are your obj "public" methods
                 // notice we are not listing add_that method, therefore this method will be a "private" method
            init : init,
            show_parent: show_parent, // you can publish a private method
            get_last_added: function(){
              return last_added; // you can access local variables
            }, 
            add_this: function (elem) {
              return add_that.apply(this, elem);  // you can also run local methods
            }
          }
      };

      $.fn.test = function (method) {
          var obj_data = this.data('myTestData');
        if (typeof(obj_data) != "undefined") {
          if ( obj_data[method] ) {
            return obj_data[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
          }else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.test' );
          }
        } else {
          if (typeof(method) === 'object' || ! method) {
            obj_data = myTestMethods();
            this.data('myTestData', obj_data);
            return obj_data.init.apply(this, arguments);
          }
        }
      };

    })(jQuery);

    $('#test').test(); //init

    $('#test').test('add_this',$('<div>Hello World d</div>'));
    $('#test').test('show_parent');

このコードには小さなテストがあるので、小さなバグがあるかもしれませんが、これはあなたが望むことをする方法の基本的な考えをあなたに示します。

于 2012-11-21T22:12:07.403 に答える
0

このデモを見てみましょう: http://jsfiddle.net/9cqcj/11/

彼らが示唆するように、データを保持するには、次を使用することをお勧めします.data。

      return this.each(function(){          
          var $this = $(this);
          $this.data("parentId",$this.parent().attr("id"));
....

（セット内の各要素のparentIdが必要であると仮定）

また、メソッドの呼び出しに問題があります。

 return this.each(function(){

          var $this = $(this);
          if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));

最後の行、arguments- に渡された関数の引数.eachが使用されます。元の引数を取得するには、メソッドを呼び出す前にそれらを変数に保存します。

$.fn.test = function (method) { 
        var args = arguments;      
      return this.each(function(){          
          var $this = $(this);
          $this.data("parentId",$this.parent().attr("id"));
          if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( args , 1 ));

最後の行の args に置き換えられた引数を参照してください。

また、 を使用している場合.apply、2 番目のパラメーターは配列にする必要があります。

return methods.add_that.apply(this, [elem]);

このような場合：

return methods.add_that.apply(this, elem);

思わぬトラブルに見舞われることがあります。たとえば、elem単純な文字列に置き換えてみて"test"、コンソールで何が得られるかを確認してください。または、jQuery オブジェクトを渡す場合は、呼び出されたメソッドで DOM オブジェクトを取得します。

于 2012-11-21T22:15:20.897 に答える