قبل بضعة أيام ، عندما كنت أكتب رمز JS في الواجهة الأمامية في العمل ، واجهت عنصر اجتياز وأضفت حدث نقرة إليه. كانت هذه المشكلة هي التي جعلتني أعدلها طوال فترة ما بعد الظهر. أخيرًا ، عدت إلى المنزل من الخروج من العمل وبحثت المعلومات عبر الإنترنت لمعرفة كيفية حلها. (PS: قرأت أيضًا محتوى برامج معالجة ربط الحلقة في الطبعة الرابعة من "JQuery Basic Tutorial". أعتقد أنني لم أقرأها بعناية في ذلك الوقت ، لذلك لم أتذكرها.)
إذا كان السيد العظيم يعرف هذا النوع من المواقف ، فيمكنه إغلاق النافذة وكتابة ذلك بشكل رئيسي للمبتدئين مثلي. شكرًا!
دعنا ننشر الأمثلة الخاطئة أولاً ليراها الجميع. (يتم استخدام jQuery في المثال ، يرجى استيراد مكتبة jQuery)
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<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 () {
لـ (var i = 1 ؛ i <= 4 ؛ i ++) {
$ ("#btn"+i) .get (0) .onclick = function () {
تنبيه (ط) ؛
}
}
}) ؛
</script>
</head>
<body>
<button id = "btn1"> الزر 1 <//button>
<button id = "btn2"> الزر 2 <//button>
<button id = "btn3"> الزر 3 <//button>
<button id = "btn4"> الزر 4 </button>
</body>
</html>
بعد تشغيل هذا الرمز ، انقر فوق الزر ويتم عرض البيانات المعروضة في التنبيه المنبثق. لقد اعتقدت دائمًا أن الأزرار من 1 إلى 4 ، والأرقام المقابلة في التنبيه هي أيضًا 1 إلى 4. إذا كنت تعتقد ذلك ، فأنت مخطئ.
انقر فوق كل زر ويتم عرض الرقم 4 في التنبيه. لم أتوقع ذلك!
اكتب الآن بعض الحلول للرجوع إليها!
النوع الأول هو كتابة وظيفة وإرجاع وظيفة في هذه الوظيفة
نسخة الكود كما يلي:
<script type = "text/javaScript">
$ (function () {
لـ (var i = 1 ؛ i <= 4 ؛ i ++) {
$ ("#btn"+i) .get (0) .onclick = btnclick (i) ؛
}
}) ؛
var btnclick = function (value) {
وظيفة الإرجاع () {
تنبيه (قيمة) ؛
}
}
</script>
النوع الثاني: استخدم تعبير وظيفة الاتصال على الفور
(الوظيفة (القيمة) {
// كتلة الكود
}) (i) // هذا هو استدعاء تعبير الوظيفة على الفور
نسخة الكود كما يلي:
<script type = "text/javaScript">
$ (function () {
لـ (var i = 1 ؛ i <= 4 ؛ i ++) {
$ ("#btn"+i) .get (0) .onclick = (function (value) {
وظيفة الإرجاع () {
تنبيه (قيمة) ؛
} })(أنا)؛
}
}) ؛
</script>
النوع الثالث: كل وظيفة باستخدام jQuery
نسخة الكود كما يلي:
<script type = "text/javaScript">
$ (function () {
$. EACH ([1،2،3،4] ، الوظيفة (الفهرس ، القيمة) {
$ ("#btn"+value) .get (0) .onclick = function () {
تنبيه (قيمة) ؛
}
}) ؛
}) ؛
</script>
يمكن أن يؤدي استخدام المواقف الثلاثة المذكورة أعلاه إلى تجنب هذا الموقف في البداية.
حيث يشير GET (0) إلى تحويل كائن jQuery إلى كائن DOM.
ما سبق هو فهمي الشخصي لموجه ربط الحلقة في إغلاق JS. سوف أشاركها معك. آمل أن يكون ذلك مفيدًا لأصدقائي.