며칠 전, 직장에서 프론트 엔드 JS 코드를 작성할 때 트래버스 요소를 만나 클릭 이벤트를 추가했습니다. 이 문제로 오후 내내 조정하게되었습니다. 마침내, 나는 Get Off Work에서 집으로 가서 온라인으로 정보를 검색하여 그것을 해결하는 방법을 찾았습니다. (PS : 또한 "JQuery Basic Tutorial"의 네 번째 판에서 루프 바인딩 처리 프로그램의 내용을 읽었습니다. 당시에는 신중하게 읽지 않았기 때문에 기억하지 못했습니다.)
위대한 주인이 이런 종류의 상황을 알고 있다면, 그는 창을 닫고 주로 나와 같은 초보자를 위해 쓸 수 있습니다. 감사해요!
모든 사람이 볼 수 있도록 먼저 잘못된 예를 게시합시다. (jQuery는 예제에서 사용됩니다. jQuery 라이브러리를 가져 오십시오)
코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> 루프 바인딩 핸들러 </title>
<script src = "js/jquery-2.1.1.min.js"> </script>
<script type = "text/javaScript">
$ (function () {
for (var i = 1; i <= 4; i ++) {
$ ( "#btn"+i) .get (0) .onclick = function () {
경고 (i);
}
}
});
</스크립트>
</head>
<body>
<버튼 id = "btn1"> 버튼 1 </button>
<버튼 id = "btn2"> 버튼 2 </button>
<버튼 id = "btn3"> 버튼 3 </button>
<버튼 id = "btn4"> 버튼 4 </button>
</body>
</html>
이 코드가 실행되면 버튼을 클릭하면 팝업 경고에 표시된 데이터가 표시됩니다. 나는 항상 버튼이 1 ~ 4라고 생각했고 경고의 해당 숫자도 1 ~ 4라고 생각했습니다. 그렇게 생각하면 잘못되었습니다.
각 버튼을 클릭하면 숫자 4가 경고에 표시됩니다. 나는 그것을 기대하지 않았다!
이제 참조를위한 몇 가지 솔루션을 작성하십시오!
첫 번째 유형은 함수를 작성 하고이 함수에서 함수를 반환하는 것입니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
$ (function () {
for (var i = 1; i <= 4; i ++) {
$ ( "#btn"+i) .get (0) .onclick = btnclick (i);
}
});
var btnclick = function (value) {
return function () {
경고 (값);
}
}
</스크립트>
두 번째 유형 : 통화 함수 표현식을 즉시 사용하십시오
(함수 (값) {
// 코드 블록
}) (i) // 이것은 함수 표현식을 즉시 호출하는 것입니다
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
$ (function () {
for (var i = 1; i <= 4; i ++) {
$ ( "#btn"+i) .get (0) .onclick = (함수 (value) {
return function () {
경고 (값);
} })(나);
}
});
</스크립트>
세 번째 유형 : jQuery를 사용한 각 기능
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
$ (function () {
$ .Each ([1,2,3,4], 함수 (인덱스, 값) {
$ ( "#btn"+value) .get (0) .onclick = function () {
경고 (값);
}
});
});
</스크립트>
위의 세 가지 상황을 사용하면 처음에는 그 상황을 피할 수 있습니다.
여기서 get (0)은 jQuery 객체를 DOM 객체로 변환하는 것을 나타냅니다.
위는 JS 클로저에서 루프 바인딩 핸들러에 대한 개인적인 이해입니다. 나는 그것을 당신과 공유 할 것입니다. 친구들에게 도움이되기를 바랍니다.