JavaScript 중성자 함수 가 외부 변 수 를 방문 하 는 3 가지 해결 방법
우 리 는 웹 페이지 를 쓸 때 다음 과 같은 상황 을 자주 만 날 것 이다.
<body>
<div class="btns-wrapper"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var wrapper = $('.btns-wrapper');
for(var i = 0; i < 5; i++){
var btn = $('<button> ' + i + '</button>').appendTo(wrapper);
btn.on('click', function(evt){
console.log(' ：' + i);
});
}
</script>
</body>
그러나 단 추 를 눌 렀 을 때 우 리 는 얻 은 번호 가 5,즉 i 의 마지막 값 이라는 것 을 발견 했다.
이것 은 click 이 벤트 를 정의 할 때 익명 함수 가 같은 변 수 를 인용 하기 때 문 입 니 다 i
해결 방법 1:즉시 실행
var wrapper = $('.btns-wrapper');
for(var i = 0; i < 5; i++){
var btn = $('<button> ' + i + '</button>').appendTo(wrapper);
//
//btn.on('click', function(evt){
// console.log(' ：' + i);
//});
// 1：
btn.on('click', (function(n){
return function(evt){
console.log(' ：' + n);
}
})(i));
}
해결 방법 2:jquery 를 이용 한 이벤트 참조
var wrapper = $('.btns-wrapper');
for(var i = 0; i < 5; i++){
var btn = $('<button> ' + i + '</button>').appendTo(wrapper);
//
//btn.on('click', function(evt){
// console.log(' ：' + i);
//});
// 2： JQuery
btn.on('click', { i: i }, function(evt){
console.log(' ：' + evt.data.i);
});
}
해결 방법 3:dom 의 data 속성 이용
var wrapper = $('.btns-wrapper');
for(var i = 0; i < 5; i++){
var btn = $('<button> ' + i + '</button>').appendTo(wrapper);
//
//btn.on('click', function(evt){
// console.log(' ：' + i);
//});
// 3： dom data
btn.data('i', i);
btn.on('click', function(evt){
console.log(' ：' + $(this).data('i'));
});
}
총결산
종합 적 으로 보면 jquery 환경 이 라면 사건 매개 변 수 를 이용 하여 변 수 를 전달 하 는 것 이 가장 간단 하고 구조 화 된 데 이 터 를 전달 할 수 있다.
그렇지 않 으 면 즉시 실행(패 킷 닫 기)하 는 방식 으로 만 가능 합 니 다.
자 바스 크 립 트 중성자 함수 가 외부 변 수 를 방문 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 JS 서브 함수 가 외부 변 수 를 방문 하 는 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
