jQuery 플러그인 작성시 옵션을 사용하는 방법은 무엇입니까?</p> <p>JQuery와 :

Question

여기 내 코드 (http://jsfiddle.net/nB4Hg/)의

// plugin code 
(function($) { 
    $.fn.coloredDiv = function(options) { 

      // defaults 
      var options = { 
       'color' : 'black' 
      }; 

      $(this).css('background', options.color); 

    } 
})(jQuery); 


     // use the plugin 
     $(function() { 

      $("#foo").coloredDiv({ 'color' : 'red' }); 
      $("#bar").coloredDiv(); 

     }); 

CSS :

div { width: 100px; height: 100px; margin-bottom: 10px; } 

HTML : 이제

<div id="foo"></div> 
<div id="bar"></div> 

I 옵션을 사용하는 방법을 배우려고 노력하고 있어요 플러그인 작성시. 내 코드에서 내가하고자하는 일은 첫 번째 div는 빨간색으로 표시해야하고 두 번째 옵션은 기본 검정이어야하는 옵션이 없으므로 지정해야합니다. 그러나 둘 다 검은 색입니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

현재 접근 방식은 options이라는 매개 변수를 허용하지만 options이라는 다른 변수를 선언하면 매개 변수를 "음영 처리"하므로 전달 된 옵션은 후속 코드에서 결코 볼 수 없습니다.

대신, 사용자, 해당되는 경우에 의해 전달 된 사람과 그 기본값을 덮어 $.extend를 사용 후, 기본 옵션을 선언해야합니다 :

$.fn.coloredDiv = function (userOptions) { 
    var options = $.extend({ 
     color: "black" 
    }, userOptions); 

    // ... 
};