Несколько дней назад, когда я писал код JS Front-End JS на работе, я столкнулся с элементом обхода и добавил к нему событие Click. Именно эта проблема заставила меня настраивать ее весь день. Наконец, я пошел домой с работы и искал информацию в Интернете, чтобы узнать, как ее решить. (PS: Я также прочитал содержание программ обработки связывания петли в четвертом издании «Jquery Basic». Я думаю, я не читал его в то время, поэтому я не помнил его.)
Если великий мастер знает такую ситуацию, он может закрыть окно и написать их в основном для новичков, таких как я. Спасибо!
Давайте сначала опубликуем неверные примеры, чтобы все могли увидеть. (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 () {
для (var i = 1; i <= 4; i ++) {
$ ("#btn"+i) .get (0) .onclick = function () {
оповещение (i);
}
}
});
</script>
</head>
<тело>
<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) {
return function () {
оповещение (значение);
}
}
</script>
Второй тип: немедленно используйте выражение функции вызова
(функция (значение) {
// кодовый блок
}) (i) // Это должно немедленно вызвать выражение функции
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
$ (function () {
для (var i = 1; i <= 4; i ++) {
$ ("#btn"+i) .get (0) .onclick = (function (value) {
return function () {
оповещение (значение);
}}) (i);
}
});
</script>
Третий тип: каждая функция с использованием jQuery
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
$ (function () {
$.
$ ("#btn"+value) .get (0) .onclick = function () {
оповещение (значение);
}
});
});
</script>
Использование вышеупомянутых трех ситуаций может избежать этой ситуации в начале.
где получить (0) относится к преобразованию объекта jQuery в объект DOM.
Вышесказанное - мое личное понимание обработчика связывания петли в закрытии JS. Я поделюсь этим с вами. Я надеюсь, что это будет полезно для моих друзей.