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

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

---

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

• JavaScript 클로저는 어떻게 작동합니까? 답변 86 개

JS를 배우려고하는데 문제가 있습니다.

나는 많은 것을 시도했지만 봤지만 모두 헛된 것입니다. 다음 코드는 예상대로 작동하지 않습니다. 클릭하면 i의 가치를 얻을 수 있지만 항상 6을 반환합니다. 머리카락을 뽑습니다. 도와주세요.

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

    console.log(i);

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

jsfiddle

---

작업 데모

이것은 전형적인 JavaScript 클로저 문제입니다. i객체 에 대한 참조가 실제 값이 아닌 클릭 핸들러 클로저에 저장됩니다 i.

모든 단일 클릭 핸들러는 6을 보유하는 카운터 오브젝트가 하나만 있으므로 각 클릭마다 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)당신의 값이 무엇을 당신에게 자바 스크립트를 요구하는 i것입니다 링크를 클릭 할 때 그 시점에서 6입니다.

상자의 내용을 얻으려면 다음과 같이하십시오.

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

    console.log(i);

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

실제 예 : http://jsfiddle.net/rmXcF/2/

---

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

It's because it's using the value of i as a closure. i is remembered through a closure which increases at every stage of the foor loop.

$("#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