이 기사는 루프 배치를 사용하여 JavaScript에 등록 된 이벤트가 인덱스 값을 올바르게 얻을 수 없다는 사실에 대한 솔루션에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
많은 친구들이 문제가 발생할 수 있습니다. 즉, For 루프를 사용하여 이벤트 처리 기능을 배치 한 다음 이벤트 처리 기능을 통해 현재 요소의 인덱스 값을 얻을 때 실패합니다. 코드 예제를 먼저 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<meta name = "author"content = "// www.vevb.com/"/>
<title> wulin.com </title>
<스타일 유형 = "텍스트/CSS">
Li {
너비 : 240px;
오버플로 : 숨겨진;
텍스트 오버 플로우 : 일방시스;
흰색 공간 : Nowrap;
글꼴 크기 : 12px;
높이 : 30px;
}
</스타일>
<script type = "text/javaScript">
Window.onload = function () {
var olis = document.getElementsByTagName ( "li");
var show = document.getElementById ( "show");
for (var index = 0; index <olis.length; index ++) {
olis [index] .onclick = function () {
show.innerhtml = index;
}
}
}
</스크립트>
</head>
<body>
<div id = "show"> </div>
<ul>
<li> 열심히 일하면 내일이 더 나을 수 있습니다. </li>
<li> 공유 및 상호 지원은 진보의 가장 큰 원동력입니다. </li>
<li> 매일 새롭고 소중히 여깁니다. </li>
<li> 아무도 처음부터 주인이 아닙니다.
<li> 현재 시간 만 소중하고 다음 두 번째는 illusory </li>입니다.
</ul>
</body>
</html>
위의 코드에서 Li 요소를 클릭 할 때 팝업 값은 항상 4입니다. 우리의 원래 아이디어는 Li 요소를 클릭하여 Div에서 현재 Li 요소의 인덱스 값을 표시하는 것입니다. 아래의 이유를 간단히 분석하겠습니다. 그 이유는 매우 간단합니다. FOR 루프가 실행 된 후 인덱스 값이 4로 변경되었으므로 위의 현상이 발생합니다.
코드는 다음과 같이 수정됩니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<meta name = "author"content = "// www.vevb.com/"/>
<title> wulin.com </title>
<스타일 유형 = "텍스트/CSS">
Li {
너비 : 240px;
오버플로 : 숨겨진;
텍스트 오버 플로우 : 일방시스;
흰색 공간 : Nowrap;
글꼴 크기 : 12px;
높이 : 30px;
}
</스타일>
<script type = "text/javaScript">
Window.onload = function () {
var olis = document.getElementsByTagName ( "li");
var show = document.getElementById ( "show");
for (var index = 0; index <olis.length; index ++) {
Olis [index] ._ index = index;
olis [index] .onclick = function () {
show.innerhtml = this._index;
}
}
}
</스크립트>
</head>
<body>
<div id = "show"> </div>
<ul>
<li> 열심히 일하면 내일이 더 나을 수 있습니다. </li>
<li> 공유 및 상호 지원은 진보의 가장 큰 원동력입니다. </li>
<li> 매일 새롭고 소중히 여깁니다. </li>
<li> 아무도 처음부터 주인이 아닙니다.
<li> 현재 시간 만 소중하고 다음 두 번째는 illusory </li>입니다.
</ul>
</body>
</html>
위의 코드는 요구 사항을 구현하며 물론 클로저를 사용할 수도 있습니다. 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<meta name = "author"content = "// www.vevb.com/"/>
<title> wulin.com </title>
<스타일 유형 = "텍스트/CSS">
Li {
너비 : 240px;
오버플로 : 숨겨진;
텍스트 오버 플로우 : 일방시스;
흰색 공간 : Nowrap;
글꼴 크기 : 12px;
높이 : 30px;
}
</스타일>
<script type = "text/javaScript">
Window.onload = function () {
var olis = document.getElementsByTagName ( "li");
var show = document.getElementById ( "show");
for (var index = 0; index <olis.length; index ++) {
(기능 (색인) {
olis [index] .onclick = function () {
show.innerhtml = index;
}
})(색인)
}
}
</스크립트>
</head>
<body>
<div id = "show"> </div>
<ul>
<li> 열심히 일하면 내일이 더 나을 수 있습니다. </li>
<li> 공유 및 상호 지원은 진보의 가장 큰 원동력입니다. </li>
<li> 매일 새롭고 소중히 여깁니다. </li>
<li> 아무도 처음부터 주인이 아닙니다.
<li> 현재 시간 만 소중하고 다음 두 번째는 illusory </li>입니다.
</ul>
</body>
</html>
이 기사의 설명이 JavaScript를 기반으로 한 모든 사람의 웹 프로그래밍에 도움이되기를 바랍니다.