Warning: Constant USER_COOKIE already defined in /var/www/admin/www/markimarta.ru/wp-config.php on line 85

Warning: Constant PASS_COOKIE already defined in /var/www/admin/www/markimarta.ru/wp-config.php on line 86

Warning: Constant AUTH_COOKIE already defined in /var/www/admin/www/markimarta.ru/wp-config.php on line 87

Warning: Constant SECURE_AUTH_COOKIE already defined in /var/www/admin/www/markimarta.ru/wp-config.php on line 88

Warning: Constant LOGGED_IN_COOKIE already defined in /var/www/admin/www/markimarta.ru/wp-config.php on line 89

Warning: Constant TEST_COOKIE already defined in /var/www/admin/www/markimarta.ru/wp-config.php on line 90
jQuery. Перехват клика по кнопке из цикла « Марк и Марта.Ру. Записки отца-программиста




jQuery. Перехват клика по кнопке из цикла


Warning: Undefined variable $thumbnail in /var/www/admin/www/markimarta.ru/wp-content/themes/markimarta2023/single.php on line 44

Warning: Attempt to read property "ID" on null in /var/www/admin/www/markimarta.ru/wp-content/themes/markimarta2023/single.php on line 44

Warning: Undefined variable $thumbnail in /var/www/admin/www/markimarta.ru/wp-content/themes/markimarta2023/single.php on line 45

Warning: Attempt to read property "post_title" on null in /var/www/admin/www/markimarta.ru/wp-content/themes/markimarta2023/single.php on line 45

Исходные данные: на странице есть 9 кнопок с id вида "btn1", "btn2", "btn3", …. "btn9". При клике на кнопку нужно выводить сообщение "Вы нажали кнопку N", где N – это текст кнопки. 

    <div class="btn" id="btn1">1</div>
    <div class="btn" id="btn2">2</div>
    <div class="btn" id="btn3">3</div>
    <div class="btn" id="btn4">4</div>
    <div class="btn" id="btn5">5</div>
    <div class="btn" id="btn6">6</div>
    <div class="btn" id="btn7">7</div>
    <div class="btn" id="btn8">8</div>
    <div class="btn" id="btn9">9</div>
Кнопки на странице

Кнопки на странице

Решение:

Решить задачу с помощью jQuery довольно просто с помощью такого кода:

        $(document).ready(function () {
            for (i = 1; i < 10; i++) {
                $("#btn" + i).click(btnHandler( i));
            }

            function btnHandler(i) {
                return function () {
                    alert('Вы нажали кнопку ' + $("#btn" + i).text())
                }
            };
        });

Функция-обработчик "btnHandler" должна быть вынесена за цикл! В противном случае вы потратите не мало времени, чтоб понять, почему работает не так как надо.

 

Распространенная ошибка:

Используя код, который как бы очевиден, получаем при клике на любую кнопку только надпись "Вы нажали на кнопку ", ибо кнопки с id "btn10" на странице нету. В данном случае "i" принимает максимальное значение.

        $(document).ready(function () {
            for (i = 1; i < 10; i++) {
                $("#btn" + i).click(function () {
                    alert('Вы нажали кнопку ' + $("#btn" + i).text());
                });
            }
        });

Вопреки здравому смыслу, значение "i" в данном случае равно 10 при нажатии любой кнопки. Можно добавить строчку alert(i), чтоб убедиться в этом.

        $(document).ready(function () {
            for (i = 1; i < 10; i++) {
                $("#btn" + i).click(function () {
                    //alert($("#btn" + i).text());
                    alert(i);
                });
            }
        });

 


Комментариев нет »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment





Срок проверки reCAPTCHA истек. Перезагрузите страницу.



MarkiMarta.ru. Записки отца-программиста" с 2009 г.
Категория информационной продукции 18+
Яндекс.Метрика