Wie schreibe ich jQuery Plugin

Question

Ich möchte ein jQuery-Plugin schreiben, das an ein DIV-Element "bind" ist und mit dem es arbeitet. Nach ein paar Versuchen - Fehler habe ich nur das Beispiel von dieser Seite kopiert - http://learn.jquery.com/plugins/basic-plugin-creation/.

So habe ich ein Element

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

Ich habe meine grundlegende Definition aus dem Beispiel Seite genommen:

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

und ich nenne es wie diese

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

Basierend auf Im Beispiel erwarte ich, dass der Text grün wird. Leider passiert nichts. Als ich „dieses“ Objekt console.log, es zeigt:

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

Also, ich bin affraid ich hier einen grundlegenden Punkt bin fehlt. Was ist falsch - warum "dieses" nicht mein Element darstellt, wie es im Beispiel ist?

Answer 1

bitte die Linie zu

ändern

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

Answer 2

greenify aufrufen sollte das Element als jQuery-Objekt zurück. Getestet in Google Chrome und das richtige Objekt wurde zurückgegeben.

konnte ich erfolgreich andere jQuery-Funktionen auf dem Objekt ausgeführt werden, die zurückgegeben wurde, wie unten zu sehen:

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

-

Auch in der Frage, erstellen Sie ein Element mit id bend, aber Sie verweisen darauf in Javascript als bends. Benennen Sie eine dieser Deklarationen um, um das Gegenteil zu erreichen.

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>

Bitte siehe oben, es funktioniert und Konsole wird das jQuery-Objekt einzuloggen, wie es ist.