2009-10-04 5 views
1

이 질문에 답해야한다고 생각하지만 검색을 통해 찾을 수 없습니다. 두 링크를jQuery 플러그인 설정 범위가

<html><head> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
<script type="text/javascript"> 
(function($){ 
    $.fn.testPlugin = function(options){ 
    settings = $.extend({val : "default"}, options); 
    return this.each(function(){ 
     $(this).click(function(e){ 
     e.preventDefault(); 
     console.log(settings.val); 
     }); 
    }); 
    } 
})(jQuery); 

$(document).ready(function(){ 
    $('a#a1').testPlugin(); 
    $('a#a2').testPlugin({val : 'new val'}); 

}); 
</script> 
</head><body> 
<a href="#" id="a1">A1</a> 
<a href="#" id="a2">A2</a> 
</body> 
</html> 

클릭하여 불을 지르고 콘솔에 "새로운 발"을 기록합니다

여기 나를 혼란 문제의 완벽한 예입니다. 첫 번째 링크에서 기본 설정을 유지하고 두 번째 링크에서 덮어 쓰기 설정을 원한다고 상상해보십시오. 이를 위해 플러그인을 구현하기위한 표준 패턴이 있어야합니까?

답변

5

범위 내에서 settings 변수를 유지하려면 var을 사용해야한다고 생각합니다. 시도해보십시오 :

$.fn.testPlugin = function(options){ 
     var settings = $.extend({val : "default"}, options); 
     return this.each(function(){ 
      $(this).click(function(e){ 
       e.preventDefault(); 
       console.log(settings.val); 
      }); 
     }); 
    } 
+0

업데이트 - 나는 $ .extend 인수 순서에 혼란 스럽다고 생각합니다. –

+1

우, 물론 ... var. 감사 – EMiller