تصف هذه المقالة الحل لحقيقة أن الأحداث المسجلة في JavaScript باستخدام دفعة حلقة لا يمكن الحصول على قيم الفهرس بشكل صحيح. شاركه للرجوع إليه. التحليل المحدد هو كما يلي:
قد يواجه العديد من الأصدقاء مشكلة ، أي عند استخدام حلقة لتسجيل الدُفعات في وظيفة معالجة الأحداث ، ثم الحصول على قيمة الفهرس للعنصر الحالي من خلال وظيفة معالجة الأحداث ، ستفشل. دعونا نلقي نظرة على مثال رمز أولاً:
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "uptor" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<type type = "text/css">
لي {
العرض: 240 بكسل ؛
الفائض: مخفي.
Text-Overflow: ellipsis ؛
الفضاء الأبيض: Nowrap ؛
حجم الخط: 12 بكسل ؛
الارتفاع: 30 بكسل ؛
}
</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 = index ؛
}
}
}
</script>
</head>
<body>
<div id = "show"> </viv>
<ul>
<li> فقط من خلال العمل الجاد ، يمكن أن يكون هناك غد أفضل. </li>
<li> المشاركة والمساعدة المتبادلة هي أكبر قوة دافعة للتقدم. </li>
<li> كل يوم جديد ، نعتز به. </li>
<li> لا أحد سيد من البداية ، فقط من خلال العمل الجاد ، هل يمكنك النمو </li>
<li> فقط الوقت الحالي ثمين ، والثاني التالي هو الوهم </li>
</ul>
</body>
</html>
في الرمز أعلاه ، عند النقر فوق عنصر LI ، تكون القيمة المنبثقة دائمًا أربعة. فكرتنا الأصلية هي النقر على عنصر LI لعرض قيمة الفهرس لعنصر LI الحالي في DIV. دعونا نحلل بإيجاز الأسباب أدناه. السبب بسيط للغاية. بعد تنفيذ حلقة For ، تغيرت قيمة الفهرس إلى أربعة ، لذلك تحدث الظاهرة أعلاه.
تم تعديل الرمز على النحو التالي:
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "uptor" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<type type = "text/css">
لي {
العرض: 240 بكسل ؛
الفائض: مخفي.
Text-Overflow: ellipsis ؛
الفضاء الأبيض: Nowrap ؛
حجم الخط: 12 بكسل ؛
الارتفاع: 30 بكسل ؛
}
</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"> </viv>
<ul>
<li> فقط من خلال العمل الجاد ، يمكن أن يكون هناك غد أفضل. </li>
<li> المشاركة والمساعدة المتبادلة هي أكبر قوة دافعة للتقدم. </li>
<li> كل يوم جديد ، نعتز به. </li>
<li> لا أحد سيد من البداية ، فقط من خلال العمل الجاد ، هل يمكنك النمو </li>
<li> فقط الوقت الحالي ثمين ، والثاني التالي هو الوهم </li>
</ul>
</body>
</html>
الرمز أعلاه ينفذ متطلباتنا ، وبالطبع ، يمكنك أيضًا استخدام عمليات الإغلاق. الرمز كما يلي:
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "uptor" content = "// www.vevb.com/"/>
<title> wulin.com </title>
<type type = "text/css">
لي {
العرض: 240 بكسل ؛
الفائض: مخفي.
Text-Overflow: ellipsis ؛
الفضاء الأبيض: Nowrap ؛
حجم الخط: 12 بكسل ؛
الارتفاع: 30 بكسل ؛
}
</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 = index ؛
}
})(فِهرِس)
}
}
</script>
</head>
<body>
<div id = "show"> </viv>
<ul>
<li> فقط من خلال العمل الجاد ، يمكن أن يكون هناك غد أفضل. </li>
<li> المشاركة والمساعدة المتبادلة هي أكبر قوة دافعة للتقدم. </li>
<li> كل يوم جديد ، نعتز به. </li>
<li> لا أحد سيد من البداية ، فقط من خلال العمل الجاد ، هل يمكنك النمو </li>
<li> فقط الوقت الحالي ثمين ، والثاني التالي هو الوهم </li>
</ul>
</body>
</html>
آمل أن يكون الوصف في هذه المقالة مفيدًا لبرمجة الويب للجميع بناءً على JavaScript.