Question

我想写一个jQuery插件，它是＆＃34; bind＆＃34;到DIV元素，它适用于。经过几次试验 - 错误后我最终只是复制了此页面中的示例 - 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＆＃34;这个＆＃34;对象，它显示：

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

所以，我很害怕我错过了一个基本观点。出了什么问题 - 为什么＆＃34;这个＆＃34;并不像示例中那样代表我的元素？

Answer 1

$.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对象。

Answer 2

请将行更改为

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

Answer 3

调用greenify应该将元素作为jQuery对象返回。在谷歌浏览器中测试并返回了正确的对象。

我能够在返回的对象上成功运行其他jQuery函数，如下所示：

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

-

此外，在问题中，您创建了一个ID为bend的元素，但您在Javascript中将其称为bends。重命名其中一个声明以匹配相反的声明。

如何编写jQuery插件

3 个答案: