<script type="text/javascript"> <!-- function $(elem){ return document.getElementById(elem); } function tag(name,elem) { return (elem||document).getElementsByTagName(name); } function init() { var div=tag("div"); for(var i=0;i<div.length;i++) { div[i].onclick=function() { alert(i); } } } // --> </script> <div id="div" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">0</div> <div id="div1" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">1</div> <div id="div2" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">2</div> <div id="div3" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">3</div> <div id="div4" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">4</div> <div id="div5" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">5</div> <div id="div6" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300 px">6</div>[Ctrl+A 전체 선택:<a href="https://www.jb51.net/article/23421.htm" title="查看具体详情" rel="noreferrer noopener nofollow">引入外部Js需再刷新一下页面才能执行</a>]상단 코드 는 div 마다 하나의 이 벤트 를 추가 하 는 것 을 의미 합 니 다.즉,div 를 클릭 할 때마다 이 div 의 해당 번 호 를 표시 합 니 다.하지만 프로그램 을 실행 할 때 우 리 는 그것 을 클릭 하 더 라 도 7 만 표시 되 는 것 이 무슨 원인 인지 알 게 될 것 입 니 다.이것 이 바로 폐쇄 적 인 문제 입 니 다.원래 js 에서 함수 에서 함 수 를 정의 하면 폐쇄 적 인 문제 가 발생 합 니 다.이때 외층 함수 에서 변 수 는 외층 함수 에서 이용 할 수 있 습 니 다.외층 함수 가 끝나 도.그러나 바깥쪽 에서 순환 이 나타 날 때 안쪽 함수 에서 이 순환 변 수 를 이용 하면 이 변수의 최종 값 을 직접 참조 합 니 다.위 코드 가 보 여 준 것 처럼어떻게 해결 할 까요?익명 함 수 를 이용 하여 해결 할 수 있다.익명 함 수 는 제동 으로 실 행 됩 니 다.우 리 는 이 특성 을 이용 하여 하나의 역할 영역,생명의 변 수 를 만들어 서 외층 의 순환 변 수 를 참조 할 수 있 습 니 다.코드 에서 보 듯 이<title/><script type="text/javascript"><!function $(elem){ return document.getElementById(elem); } function tag(name,elem) { return (elem||document).getElementsByTagName(name); } function init() { var div=tag("div"); for(var i=0;i<div.length;i++){ (function(){ var temp=i; div[temp].onclick=function() { alert(temp); } })() } } // --></script> <div id="div" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">0</div> <div id="div1" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">1</div> <div id="div2" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">2</div> <div id="div3" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">3</div> <div id="div4" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">4</div> <div id="div5" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300px">5</div> <div id="div6" style=" border:1px solid #eee; background:#000;color:#fff;height:50px;width:300 px">6</div>[Ctrl+A 전체 선택:<a href="https://www.jb51.net/article/23421.htm" title="查看具体详情" rel="noreferrer noopener nofollow">引入外部Js需再刷新一下页面才能执行</a>]내부 함수 에서 순환 변수 가 나타 나 면 모두 최종 값 이기 때문에 우 리 는 익명 함 수 를 이용 하여 하나의 역할 영역 을 자극 하고 내부 순환 에 들 어가 기 전에 다른 변수 가 이 순환 변수의 값 을 얻 습 니 다.이 사상 은 폐쇄 문 제 를 처리 하 는 정수 입 니 다.다음 과 같은 예:이때 뚜렷 한 for 순환 은 없 지만 상기 사상 에 따라 문 제 를 즉시 해결 할 수 있 습 니 다<title>"+text; divChild.onclick=function() { alert("row"+id); $("row"+id).value=text; } id++; } // --> [Ctrl+A 전체 주석:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]해결 후 코드:"+text; (function(){ var d=id; divChild.onclick=function() { alert("row"+d); $("row"+d).value=text; } })() id++; } // --> [Ctrl+A 전체 주석:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]function $(elem){ return document.getElementById(elem); } var id=0; function addDiv() { var text="testtestetsetstsetstst"; var div=$("div"); var divChild=document.createElement("div"); div.appendChild(divChild); divChild.id="div"+id; divChild.innerHTML=" "+text; divChild.onclick=function(f){ return function(){ alert(f); } }(id) id++; } // --> [Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]제 개인 적 인 이 해 는 내부 순환 에 들 어가 기 전에 id 를 f 에 게 부여 하 는 것 입 니 다.f 는 내부 순환 의 매개 변수 로 서 그 사상 은 똑 같 아야 합 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
