배경색을 변경하는 기본 jQuery 플러그인

Question

jQuery 플러그인 개발을 시도하고있는 초보자입니다. 외부 js 파일 (작은 플러그인)에서 배경색을 변경하려고합니다. 콘솔에 "잡히지 않은 TypeError : 객체 #에는 메서드 '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() 
}); ​ 

이 내 플러그인입니다. each 루프 내부

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

는 this는 기본 DOM 노드가 아닌 jQuery를 객체를 참조. jQuery로 전달해야합니다 :

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

또한 질문에 플러그 인 코드에 여는 괄호가 없습니다. 나는 이것이 단지 실수로 코드를 복사하여 귀하의 질문에 붙여 넣는 것이라고 생각합니다.

여기는 working example입니다.