Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 
Рейтинг 4.91/32: Рейтинг темы: голосов - 32, средняя оценка - 4.91
z-z
170 / 169 / 56
Регистрация: 22.06.2011
Сообщений: 980

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

06.01.2013, 13:35. Показов 6491. Ответов 30
Метки нет (Все метки)

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

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

вот как то программно надо узнать, на каком элементе пользователь кликнул и достать id этого элемента...
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
06.01.2013, 13:35
Ответы с готовыми решениями:

Обработка click при нескольких одинаковых элементах
Здравствуйте! Не могу сообразить..как сделать обработку отдельно каждого элемента? Есть три звездочных рейтинга на одной странице: ...

Hover на нескольких элементах одновременно
Необходимо сделать так, чтобы при наведении на картинку она становилась темнее, появлялся блок с иконками, при наведении на иконки, они...

Обработка нажатий на элементах списка Recycleview
Здравствуйте! Впервые пытаюсь создать список с возможностью нажатия на элементах списка. При нажатии на элементы происходят переходы...

30
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
 Аватар для Mullih
92 / 71 / 8
Регистрация: 05.08.2012
Сообщений: 138
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>
1
z-z
170 / 169 / 56
Регистрация: 22.06.2011
Сообщений: 980
06.01.2013, 17:53  [ТС]
обманывать не хорошо))) спасибо. но клики не блокируются все равно... я так же могу вызвать вторую анимацию до момента, пока первая не закончилась...(
0
 Аватар для Mullih
92 / 71 / 8
Регистрация: 05.08.2012
Сообщений: 138
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);
1
z-z
170 / 169 / 56
Регистрация: 22.06.2011
Сообщений: 980
06.01.2013, 18:19  [ТС]
Mullih, вот спасибо)) еще немного подкорректировал и самое то получилось))
0
 Аватар для Mullih
92 / 71 / 8
Регистрация: 05.08.2012
Сообщений: 138
06.01.2013, 18:22
Цитата Сообщение от z-z Посмотреть сообщение
Mullih, вот спасибо)) еще немного подкорректировал и самое то получилось))
если мне память не изменяет вы еще не сделали воркфлоу если сервер вернет ошибку. Если вы этот момент не обработаете то к примеру после 500-ой ошибки ваши кнопки перестануть быть кликабельны
0
z-z
170 / 169 / 56
Регистрация: 22.06.2011
Сообщений: 980
06.01.2013, 18:26  [ТС]
пока это не очень надо, сейчас это просто тест)) если вдруг понадобится, попробую что нить сделать... ошибка загрузки страницы же не особо часто возникает, я так думаю по крайней мере))

только как узнать, что страничка не загружена? load же вроде в любом случает вызывает функцию завершения загрузки...
0
 Аватар для Mullih
92 / 71 / 8
Регистрация: 05.08.2012
Сообщений: 138
06.01.2013, 18:30
Цитата Сообщение от z-z Посмотреть сообщение
пока это не очень надо, сейчас это просто тест)) если вдруг понадобится, попробую что нить сделать... ошибка загрузки страницы же не особо часто возникает, я так думаю по крайней мере))

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

Load это обвертка $.ajax({});
0
z-z
170 / 169 / 56
Регистрация: 22.06.2011
Сообщений: 980
06.01.2013, 18:33  [ТС]
на аякс менять, что ли?))
0
 Аватар для Mullih
92 / 71 / 8
Регистрация: 05.08.2012
Сообщений: 138
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>
правда я лично предпочитаю разделять мух от котлет
0
z-z
170 / 169 / 56
Регистрация: 22.06.2011
Сообщений: 980
06.01.2013, 18:54  [ТС]
Mullih, а, ну раз на load можно навесить, то сложного наверно ничего не остается...
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
06.01.2013, 18:54
Помогаю со студенческими работами здесь

Как заставить свойство transition заработать одновременно на нескольких элементах?
Как заставить свойство transition выполняться одновременно на нескольких элементах(div) Есть код: &lt;div...

Обработка клика
Объясните, пожалуйста как изменить программу, чтобы ф-я module.f могла выполниться внутри head, а не внутри body. &lt;!DOCTYPE...

Обработка клика мыши
Добрый день, уважаемые форумчане. Подскажите функцию, при помощи которой можно фиксировать координаты в окне и время их фиксации. ...

Обработка клика по видео
Почему не работает, все просто пользователь на 1-м кадре нажимает &quot;сделать снимок&quot;, 2-й кадр включает веб камеру. Но у меня не...

Обработка клика css
Друзья, добрый день. Задача такая - есть блок с произвольной информацией и нужно чтобы по клику информация в блоке менялась. Вот примерно...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
31
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru