for 루프 내에서 JavaScript 클릭 핸들러가 예상대로 작동하지 않음

for 루프 내에서 JavaScript 클릭 핸들러가 예상대로 작동하지 않음

이 질문에는 이미 답변이 있습니다.

JavaScript 폐쇄는 어떻게 작동합니까? (86회답)

닫힘8년 전.

JS를 배우려고 하는데 문제가 생겼어요.

나는 많은 것을 시도하고 검색했지만 모두 허사였다.다음 코드가 예상대로 작동하지 않습니다.의 가치를 얻어야 한다.i클릭해도 항상 6이 반환됩니다.머리 뽑고 있어요. 도와주세요.

for (var i = 1; i < 6; i++) {

    console.log(i);

    $("#div" + i).click(
        function() {
            alert(i);
        }
    );
}

jsfiddle

작업 데모

이것은 전형적인 JavaScript 종료 문제입니다.에 대한 참조i실제 값이 아닌 클릭 핸들러 폐쇄에 객체가 저장되어 있다.i.

6을 유지하는 카운터 객체는 1개뿐이므로 클릭할 때마다 6이 표시되므로 모든 클릭 핸들러는 동일한 객체를 참조합니다.

회피책은 이것을 어나니머스 함수로 랩하고 i를 인수로 전달하는 것입니다.프리미티브는 함수 호출 값별로 복사됩니다.

for(var i=1; i<6; i++) {
     (function (i) {
        $("#div" + i).click(
            function () { alert(i); }
        );
     })(i);
}

갱신하다

갱신된 데모

또는 'let'을 대신 사용할 수 있습니다.var선언하다i.let매번 새로운 바인딩을 제공합니다.ECMAScript 6에서만 사용할 수 있습니다.strict mode.

'use strict';

for(let i=1; i<6; i++) {

        $("#div" + i).click(
            function () { alert(i); }
        );
 }

문제는 루프를 반복하면서i증가합니다.값은 6이 됩니다.당신이 말할 때alert(i)당신은 javascript를 요청하고 있습니다.i링크가 클릭된 시점입니다.이 시점에서는 6이 됩니다.

대신 상자의 내용을 가져오려면 다음과 같이 하십시오.

for (var i = 1; i < 6; i++) {
  console.log(i);
  $("#div" + i).click(function(e) {
    alert($(this).text());
  });
}

div {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5">5</div>

$("#div" + i).click(
    function() {
        alert(i);
    }
);

그 이유는 그 가치를 사용하고 있기 때문이다.i마무리 짓기 위해서. ifoor 루프의 모든 단계에서 증가하는 폐쇄를 통해 기억됩니다.

$("#div" + i).click(function(event) {
    alert($(event.target).attr("id").replace(/div/g, ""));
});

언급URL : https://stackoverflow.com/questions/16589806/javascript-click-handler-not-working-as-expected-inside-a-for-loop