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 指的是 native DOM 节点，而不是 jQuery 对象。您需要将其传递到 jQuery:

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

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

这是一个working example .