jQueryプラグインの書き方

Question

私は、DIV要素に「バインド」されているjQueryプラグインを書きたいと思います。試行錯誤の後、私はこのページの例をコピーするだけで終わった。http://learn.jquery.com/plugins/basic-plugin-creation/。

だから、私は要素

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

を持っている私は、例のページから取られた私の基本的な定義があります。

(function ($) { 
    $.fn.greenify = function() { 
     this.css("color", "green"); 
     console.log(this); 
     return this; 
    }; 
}(jQuery)); 

を、私はに基づいて、この

$("#bend").greenify(); 

のようにそれを呼び出します例、私はテキストが緑色になることを期待しています。不幸にも、何も起こりません。私がconsole.logの "this"オブジェクトを表示すると、次のようになります。

n.fn.init {context: document, selector: "#bend"} 

私はここで基本的な点を欠いています。何が間違っているのですか？この例のように「this」が私の要素を表さないのはなぜですか？

Answer 1

はjQueryオブジェクトとしての要素を返す必要がありますgreenifyを呼び出す

$("#bends").greenify(); 

Answer 2

に行を変更してください。 Google Chromeでテストされ、適切なオブジェクトが返されました。

私は正常に下図のように、返されたオブジェクト上の他のjQueryの関数を実行することができた：

var x = $("#bend").greenify(); x.css('color', 'red');

- また、質問には、あなたが持つ要素を作成

id bendですが、Javascriptでbendsと表示されています。これらの宣言の1つを、その反対に一致する名前に変更します。

Answer 3

$.fn.greenify = function() { 
 
    this.css("color", "green"); 
 
    console.log(this); 
 
    return this; 
 
}; 
 

 
$('.color-me').greenify()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="color-me">Me</div>

それが動作し、そのままコンソールはjQueryオブジェクトをログに記録しますが、上記を参照してください。