Обработка клика на нескольких элементах

z-z · Регистрация: 22.06.2011

Студворк — интернет-сервис помощи студентам

Здравствуйте. Подскажите, пожалуйста, как обработать более красиво клик на нескольких элементах меню?

То есть у меня меню с несколькими элементами, у этих элементов id= menuElem1, menuElem2, menuElem3.....

вот как то программно надо узнать, на каком элементе пользователь кликнул и достать id этого элемента...

z-z · 06.01.2013, 17:36 **[ТС]**

эм... немного не понял.

если не передавать параметров в функцию, ругается, что не может найти pageWidth, а если я передаю хотя бы один параметр - pageWidth, то ругается так

Uncaught exception: TypeError: Cannot convert 'this.id' to object

@Mullih · 06.01.2013, 17:47

Сообщение от z-z

эм... немного не понял.

если не передавать параметров в функцию, ругается, что не может найти pageWidth, а если я передаю хотя бы один параметр - pageWidth, то ругается так

Uncaught exception: TypeError: Cannot convert 'this.id' to object

как и обещал я вас обманул))

правленый вариант с вашего сайта блока скриптов

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<script type="text/javascript">
 
 
 
    $().ready(function () {
 
        var $menuElems = $('div[id^="menuElem"]');
 
        var windowWidth = $(window).width();
        var windowHeigth = $(window).height();
 
        var fonWidth = $('#fon').width();
 
        var menuHeigth = $('#menu').height();
        var menuWidth = $('#menu').width();
 
        var pageWidth = $('.page').width();
        var pageHeigth = $('.page').height();
 
        $('#menuElem2').addClass('activeMenu');
        $('.page').load("page2.php");
 
        $('#menu').css({ 'left': windowWidth / 2 - menuWidth / 2 });
        $('#fon').css({ 'width': 3 * windowWidth, 'height': windowHeigth, 'left': -windowWidth });
        $('.page').css({ 'top': menuHeigth, 'left': windowWidth / 2 - pageWidth / 2 })
 
        var pageLeft = $('.page').css('left');
        var pageTop = $('.page').css('top');
 
        function onMenuClick(e) {
            var $el = $(this);
 
            alert($el.attr('id'));
            var numTo = parseInt(this.id.replace(/\D+/g, ""));
            var numFrom = parseInt($('.activeMenu').attr('id').replace(/\D+/g, ""));
            var idNum = this.id.replace(/\D+/g, "");
            var fonLeft = 0;
            if (idNum == 1) fonLeft = 0;
            else if (idNum == 2) fonLeft = -windowWidth;
            else if (idNum == 3) fonLeft = -2 * windowWidth;
 
            var $newPage = $('<div class="newPage" style="width:' + pageWidth + 'px;height:' + pageHeigth + 'px;position:absolute;background: #ccc;left: ' + (numFrom > numTo ? -pageWidth : windowWidth) + 'px;top:' + pageTop + ';border-radius: 10px"></div>');
 
 
 
            $newPage.load("page" + numTo + ".php", function () {
                $('#fon').animate({ 'left': fonLeft }, 2000);
                $('.activeMenu', $menuElems).removeClass('activeMenu');
                $el.addClass('activeMenu');
 
                $('body').append($newPage);
                $('.page').animate({ 'left': numFrom > numTo ? windowWidth : -pageWidth }, 2000);
                $newPage.animate(
                        {
                            'left': pageLeft
                        },
                        2000,
                        function () {
                            $('.page').remove();
                            $('.newPage').addClass('page');
                            $('.page').removeClass('newPage');
                            $menuElems.one('click', onMenuClick);
                        }
                );
 
            });
        }
 
 
 
        $menuElems.one('click', onMenuClick);
 
    });
 
</script>

z-z · 06.01.2013, 17:53 **[ТС]**

обманывать не хорошо))) спасибо. но клики не блокируются все равно... я так же могу вызвать вторую анимацию до момента, пока первая не закончилась...(

@Mullih · 06.01.2013, 18:01

Сообщение от z-z

обманывать не хорошо))) спасибо. но клики не блокируются все равно... я так же могу вызвать вторую анимацию до момента, пока первая не закончилась...(

да-да-да)) не то насоветовал))

поменяйте

JavaScript
1
2
3
        function onMenuClick(e) {
            
            var $el = $(this);

на

JavaScript
1
2
3
        function onMenuClick(e) {
            $menuElems.unbind('click', onMenuClick);
            var $el = $(this);

и

поменяйте 2х местах

JavaScript
1
$menuElems.one('click', onMenuClick);

на

JavaScript
1
$menuElems.bind('click', onMenuClick);

z-z · 06.01.2013, 18:19 **[ТС]**

Mullih, вот спасибо)) еще немного подкорректировал и самое то получилось))

@Mullih · 06.01.2013, 18:22

Сообщение от z-z

Mullih, вот спасибо)) еще немного подкорректировал и самое то получилось))

если мне память не изменяет вы еще не сделали воркфлоу если сервер вернет ошибку. Если вы этот момент не обработаете то к примеру после 500-ой ошибки ваши кнопки перестануть быть кликабельны

z-z · 06.01.2013, 18:26 **[ТС]**

пока это не очень надо, сейчас это просто тест)) если вдруг понадобится, попробую что нить сделать... ошибка загрузки страницы же не особо часто возникает, я так думаю по крайней мере))

только как узнать, что страничка не загружена? load же вроде в любом случает вызывает функцию завершения загрузки...

@Mullih · 06.01.2013, 18:30

Сообщение от z-z

пока это не очень надо, сейчас это просто тест)) если вдруг понадобится, попробую что нить сделать... ошибка загрузки страницы же не особо часто возникает, я так думаю по крайней мере))

только как узнать, что страничка не загружена? load же вроде в любом случает вызывает функцию завершения загрузки...

Load это обвертка $.ajax({});

z-z · 06.01.2013, 18:33 **[ТС]**

на аякс менять, что ли?))

@Mullih · 06.01.2013, 18:40

Сообщение от z-z

на аякс менять, что ли?))

лично я например только $.ajax() и использую, но это сугубо лично а вот к примеру в доках jq такой пример предоставлен,

JavaScript
1
2
3
4
5
6
7
8
<script>
$("#success").load("/not-here.php", function(response, status, xhr) {
  if (status == "error") {
    var msg = "Sorry but there was an error: ";
    $("#error").html(msg + xhr.status + " " + xhr.statusText);
  }
});
  </script>

правда я лично предпочитаю разделять мух от котлет

z-z · 06.01.2013, 18:54 **[ТС]**

Mullih, а, ну раз на load можно навесить, то сложного наверно ничего не остается...

Новые блоги и статьи Все статьи Все блоги /
Программное добавление префикса в нумерацию документов Maks 27.10.2026 Реализация из решения ниже выполнена в самописной конфигурации на БСП (помощь начинающему коллеге). Задача: Программно добавить префикс в нумерацию документов. Решение: В модуле объекта. . .	После закрытия оутлука продолжает висеть процесс в диспетчере задач Maks 27.10.2026 С недавнего времени в продакшене возникла проблема: при закрытии оутлука в диспетчере задач продолжал висеть процесс outlook. exe. Проблема возникла после установки MS Office 2021 LTSC на машинах, под. . .	Baragoz - DPS/HPS бот для WoW 3.3.5a, многоязычный AmbA 26.10.2026 Хотите ещё ботов? У меня есть один! А я пока отдохну от него. https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=12062&stc=1&d=1793007952 Инструкция внутри. https:/ / youtu. be/ VpfFZSUDGnQ. . .	Особенности gif сгенерированных в Си russiannick 21.10.2026 Рассмотрим генерацию gif файлов, которые в Си имеют свои особенности. Gif представляет собой графический формат популярный в интернете. Посмотрим на палитру. Gif файл сгенерированный в си отличается. . .
FPS контроллер с анимированными Y-Bot и 3D-звуком miniaudio (Box3D, Recast, BehaviorTree.CPP, ozz-animation, ImGui, OpenGL и SDL3) 8Observer8 18.10.2026 Содержание блога \| English Version Полное мультиплатформенное руководство по стартовому проекту с FPS-контроллером игрока, анимированными роботами Y-Bot с 4-слойным блендингом, 3D-физикой Box3D,. . .	Локальный http сервер Argus19 17.10.2026 Локальный http сервер На работе, на двух локальных компьютерах круглосуточно работают программы опроса приборов с записью в книги Excel,которые раз в сутки записываются на сервер компании. Т. к. . . .	Копировать Windows на новый диск на UEFI damix 17.10.2026 https:/ / uriesk. wordpress. com/ 2016/ 11/ 01/ move-window-10-to-ssd-on-a-uefi-dualboot-system-with-basic-linux-tools/ TL DR Вставляем диск, а старый подключаем через переходник, грузимся с лайва. . .	ИИ не может найти нужный язык в списке Supersumestria 05.10.2026 Я ему даю вот такое изображение и прошу найти и подчеркнуть немецкий язык. Возвращает он вот это: https:/ / i. **********/ vqBWLe2. png Нужную строчку в 3й колонке просто выдумал. . Это. . .

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980

	Обработка клика на нескольких элементах 06.01.2013, 13:35. Показов 6774. Ответов 30 Метки нет (Все метки) Здравствуйте. Подскажите, пожалуйста, как обработать более красиво клик на нескольких элементах меню? То есть у меня меню с несколькими элементами, у этих элементов id= menuElem1, menuElem2, menuElem3..... вот как то программно надо узнать, на каком элементе пользователь кликнул и достать id этого элемента... 0

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	06.01.2013, 17:36 [ТС]
	эм... немного не понял. если не передавать параметров в функцию, ругается, что не может найти pageWidth, а если я передаю хотя бы один параметр - pageWidth, то ругается так Uncaught exception: TypeError: Cannot convert 'this.id' to object 0

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	06.01.2013, 17:53 [ТС]
	обманывать не хорошо))) спасибо. но клики не блокируются все равно... я так же могу вызвать вторую анимацию до момента, пока первая не закончилась...( 0

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	06.01.2013, 18:19 [ТС]
	Mullih, вот спасибо)) еще немного подкорректировал и самое то получилось)) 0

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	06.01.2013, 18:26 [ТС]
	пока это не очень надо, сейчас это просто тест)) если вдруг понадобится, попробую что нить сделать... ошибка загрузки страницы же не особо часто возникает, я так думаю по крайней мере)) только как узнать, что страничка не загружена? load же вроде в любом случает вызывает функцию завершения загрузки... 0

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	06.01.2013, 18:33 [ТС]
	на аякс менять, что ли?)) 0

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	06.01.2013, 18:54 [ТС]
	Mullih, а, ну раз на load можно навесить, то сложного наверно ничего не остается... 0