บทความนี้อธิบายวิธีการแก้ปัญหาความจริงที่ว่าเหตุการณ์ที่ลงทะเบียนใน JavaScript โดยใช้สำหรับชุดลูปไม่สามารถรับค่าดัชนีได้อย่างถูกต้อง แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
เพื่อนหลายคนอาจประสบปัญหานั่นคือเมื่อใช้ A for for เพื่อการลงทะเบียนแบทช์ลงทะเบียนฟังก์ชั่นการประมวลผลเหตุการณ์จากนั้นในที่สุดก็ได้รับค่าดัชนีขององค์ประกอบปัจจุบันผ่านฟังก์ชั่นการประมวลผลเหตุการณ์มันจะล้มเหลว ลองดูตัวอย่างโค้ดก่อน:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "Author" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<style type = "text/css">
หลี่ {
ความกว้าง: 240px;
ล้น: ซ่อน;
Text-Overflow: Ellipsis;
พื้นที่สีขาว: NowRap;
ขนาดตัวอักษร: 12px;
ความสูง: 30px;
-
</style>
<script type = "text/javascript">
window.onload = function () {
var olis = document.getElementsByTagname ("li");
var show = document.getElementById ("show");
สำหรับ (var index = 0; index <olis.length; index ++) {
olis [index] .onclick = function () {
show.innerhtml = ดัชนี;
-
-
-
</script>
</head>
<body>
<div id = "show"> </div>
<ul>
<li> โดยการทำงานอย่างหนักเท่านั้นในวันพรุ่งนี้ </li>
<li> การแบ่งปันและความช่วยเหลือซึ่งกันและกันเป็นแรงผลักดันที่ยิ่งใหญ่ที่สุดสำหรับความคืบหน้า </li>
<li> ทุกวันเป็นของใหม่หวงแหนมัน </li>
<li> ไม่มีใครเป็นอาจารย์ตั้งแต่ต้นโดยการทำงานอย่างหนักคุณสามารถเติบโตได้หรือไม่ </li>
<li> เฉพาะเวลาปัจจุบันที่มีค่าสองวินาทีถัดไปคือภาพลวงตา </li>
</ul>
</body>
</html>
ในรหัสข้างต้นเมื่อคลิกที่องค์ประกอบ LI ค่าป๊อปอัพจะอยู่ที่สี่เสมอ แนวคิดดั้งเดิมของเราคือคลิกที่องค์ประกอบ LI เพื่อแสดงค่าดัชนีขององค์ประกอบ LI ปัจจุบันใน DIV ลองวิเคราะห์เหตุผลด้านล่างสั้น ๆ เหตุผลนั้นง่ายมาก หลังจากดำเนินการสำหรับลูปค่าดัชนีได้เปลี่ยนเป็นสี่ดังนั้นปรากฏการณ์ข้างต้นเกิดขึ้น
รหัสได้รับการแก้ไขดังนี้:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "Author" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<style type = "text/css">
หลี่ {
ความกว้าง: 240px;
ล้น: ซ่อน;
Text-Overflow: Ellipsis;
พื้นที่สีขาว: NowRap;
ขนาดตัวอักษร: 12px;
ความสูง: 30px;
-
</style>
<script type = "text/javascript">
window.onload = function () {
var olis = document.getElementsByTagname ("li");
var show = document.getElementById ("show");
สำหรับ (var index = 0; index <olis.length; index ++) {
olis [index] ._ index = index;
olis [index] .onclick = function () {
show.innerhtml = this._index;
-
-
-
</script>
</head>
<body>
<div id = "show"> </div>
<ul>
<li> โดยการทำงานอย่างหนักเท่านั้นในวันพรุ่งนี้ </li>
<li> การแบ่งปันและความช่วยเหลือซึ่งกันและกันเป็นแรงผลักดันที่ยิ่งใหญ่ที่สุดสำหรับความคืบหน้า </li>
<li> ทุกวันเป็นของใหม่หวงแหนมัน </li>
<li> ไม่มีใครเป็นอาจารย์ตั้งแต่ต้นโดยการทำงานอย่างหนักคุณสามารถเติบโตได้หรือไม่ </li>
<li> เฉพาะเวลาปัจจุบันที่มีค่าสองวินาทีถัดไปคือภาพลวงตา </li>
</ul>
</body>
</html>
รหัสข้างต้นใช้ข้อกำหนดของเราและแน่นอนคุณสามารถใช้การปิดได้ รหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "Author" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<style type = "text/css">
หลี่ {
ความกว้าง: 240px;
ล้น: ซ่อน;
Text-Overflow: Ellipsis;
พื้นที่สีขาว: NowRap;
ขนาดตัวอักษร: 12px;
ความสูง: 30px;
-
</style>
<script type = "text/javascript">
window.onload = function () {
var olis = document.getElementsByTagname ("li");
var show = document.getElementById ("show");
สำหรับ (var index = 0; index <olis.length; index ++) {
(ฟังก์ชั่น (ดัชนี) {
olis [index] .onclick = function () {
show.innerhtml = ดัชนี;
-
})(ดัชนี)
-
-
</script>
</head>
<body>
<div id = "show"> </div>
<ul>
<li> โดยการทำงานอย่างหนักเท่านั้นในวันพรุ่งนี้ </li>
<li> การแบ่งปันและความช่วยเหลือซึ่งกันและกันเป็นแรงผลักดันที่ยิ่งใหญ่ที่สุดสำหรับความคืบหน้า </li>
<li> ทุกวันเป็นของใหม่หวงแหนมัน </li>
<li> ไม่มีใครเป็นอาจารย์ตั้งแต่ต้นโดยการทำงานอย่างหนักคุณสามารถเติบโตได้หรือไม่ </li>
<li> เฉพาะเวลาปัจจุบันที่มีค่าสองวินาทีถัดไปคือภาพลวงตา </li>
</ul>
</body>
</html>
ฉันหวังว่าคำอธิบายในบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรมเว็บของทุกคนตาม JavaScript