jquery - 用于更改背景颜色的基本 jQuery 插件

Question

我是一个正在尝试 jQuery 插件开发的新手。我正在尝试从外部 js 文件（一个小插件）更改背景颜色控制台说“未捕获的类型错误：对象 # 没有方法 'css'”如果我完全偏离轨道，请原谅我。

HTML

<button id="clicker">change</button>
<div id='ra'>Box</div>​

CSS

#ra {
    height:100px;
    width:100px;
    background-color: #DDD;
}​

JS

var $ra = $('#ra');
$('#clicker').on('click',function(){
    $ra.change()
});    ​

这是我的插件。

function( $, window, document, undefined ) { 
    $.fn.change = function( options ) {
        return this.each (function() { 
            this.css('background-color','rgba(52,36,42,0.2)');
        });
    };
})( jQuery, window, document );

Answer 1

在each循环内部，this指的是本地 DOM 节点，而不是 jQuery 对象。您需要将其传递给 jQuery：

return this.each (function() { 
    $(this).css('background-color','rgba(52,36,42,0.2)');
});

另请注意，在您的问题中，插件代码缺少左括号。我猜这只是将代码复制并粘贴到您的问题中的错误。

这是一个工作示例。