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

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

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

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

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

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

@Grand7 · 06.01.2013, 14:00

JavaScript
1
2
3
$('element[id^="menuElem"]').click(function () {
    alert(this.id)
});

z-z · 06.01.2013, 14:11 **[ТС]**

Grand7, спасибо. а можно как то со всеми остальными элементами какие то действия совершать? в данном случае надо всем остальным присвоить какой то класс...

@Grand7 · 06.01.2013, 14:24

JavaScript
1
2
3
4
5
6
$('element[id^="menuElem"]').click(function () {
    var i = this.id.match(/\d+$/g);
    $('element[id^="menuElem"]').each(function (_i) {
        if ((_i + 1) != i) $(this).addClass('classname'); else $(this).removeClass('classname');
    });
});

@Mullih · 06.01.2013, 14:31

JavaScript
1
2
3
4
$('element[id^="menuElem"]').click(function () {
    $('element[id^="menuElem"]').not($(this)).removeClass('className');
    $(this).addClass('className');
});

так чуть меньше писать

@Grand7 · 06.01.2013, 14:41

Mullih, тогда так.

JavaScript
1
2
3
4
$('element[id^="menuElem"]').click(function () {
    $('element[id^="menuElem"]').not($(this)).addClass('className');
    $(this).removeClass('className');
});

z-z · 06.01.2013, 14:47 **[ТС]**

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

подумал поставить что то в параметре окончания анимации, но не знаю, что...)

@Grand7 · 06.01.2013, 14:51

JavaScript
1
.stop();

@Mullih · 06.01.2013, 14:57

не видя кода сложно чтото предложить но как вариант можно до окончания анимации отписаться он click а после снова подписаться

к примеру это будет выглядеть както так

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var $elems = $('element[id^="menuElem"]');
 
var onElemClick = function() {
    $elems.unbind('click', onElemClick);
 
    $elems.not($(this)).addClass('className');
    $(this).removeClass('className');
 
    $(this).animate({
            left: 50,
        }, 500, function() {
            $elems.click(onElemClick);
        });
 
};
 
$elems.click(onElemClick);

z-z · 06.01.2013, 15:11 **[ТС]**

Mullih, а $elems - это типа массив?))

@Grand7 · 06.01.2013, 15:16

z-z, да, там все элементы меню (menuElem1, menuElem2 и т.д.)

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

спасибо, сейчас как нибудь попробую сопоставить...

z-z · 06.01.2013, 15:38 **[ТС]**

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

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

вариант, предложенный выше, не поддается потому, что анимация, которая проходит со страницей, то бишь основная анимация, находится в дополнительной функции createNewPage, поэтому у меня не получилось применить этот вариант))

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
            $('div[id^="menuElem"]').click(function () {
                var numTo = parseInt($(this).attr('id').replace(/\D+/g,""));
                var numFrom = parseInt($('.activeMenu').attr('id').replace(/\D+/g,""));
                var idNum = this.id.replace(/\D+/g,"");
                var fonLeft;
                if(idNum == 1) fonLeft = 0;
                else if(idNum == 2) fonLeft = -windowWidth;
                else if(idNum == 3) fonLeft = -2*windowWidth;
                $('#fon').animate({'left': fonLeft}, 2000);
                $('.activeMenu').removeClass('activeMenu')
                $(this).addClass('activeMenu')
                createNewPage(pageWidth, pageHeigth, pageLeft, pageTop, windowWidth, numTo, numFrom); 
            });

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
        function createNewPage(pageWidth, pageHeigth, pageLeft, pageTop, windowWidth, numTo, numFrom){
            $('body').append('<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");
            $('.newPage').animate(
                {
                    'left': pageLeft
                },
 
                2000,
                
                function(){
                    $('.page').remove();
                    $('.newPage').addClass('page');
                    $('.page').removeClass('newPage');
                }
            );
            $('.page').animate({'left': numFrom>numTo?windowWidth:-pageWidth}, 2000);       
        }

@Mullih · 06.01.2013, 15:41

html плиз выложите, или было бы лучше чтоб захостили это кудато

z-z · 06.01.2013, 15:45 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="fon"></div>
 
<script type="text/javascript">тут тот скрипт</script>
 
<div id="menu">
    <div class="menuElem" id="menuElem1"></div>
    <div class="menuElem" id="menuElem2"></div>
    <div class="menuElem" id="menuElem3"></div>
</div>
 
<div class="page"></div>

стили на всякий случай...))

Кликните здесь для просмотра всего текста

CSS
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
        *{margin:0; padding: 0;}
        html, body{overflow: hidden;}
        #fon{
            position: absolute;
            background: url(1.jpg) #ccc no-repeat;
            background-size: 100% 100%;
        }
        #menu{
            position: absolute;
            
        }
        .menuElem{
            float:left;
            width: 40px;
            height: 40px;
            margin: 20px;
            background: url(btn.gif);
            background-size: 100% 100%;
            cursor: pointer;
        }
        .page{
            position: absolute;
            width: 60%;
            height: 80%;
            background: #ccc;
            border-radius: 10px;
        }
        .activeMenu{
            background: url(btn-active.gif);
            background-size: 100% 100%;
        }

Добавлено через 1 минуту
Mullih, дык собственно вот )))

@Mullih · 06.01.2013, 16:04

вы хотите чтоб в случае нажатии другой страницы до окончания анимации

а. предыдущая анимация завершилась мгновено и выполнилась новая анимация
б. предыдущая анимация завершилась анимированно и выполнилась новая анимация
в. предыдущая анимация завершилась нормально и пока она не завершиться выбора новой страницы не происходило

-------------

когда вы создаете новую страницу она должна создаться до начала анимации или после окончания анимации?

z-z · 06.01.2013, 16:12 **[ТС]**

Mullih, из пунктов мне нужен пункт В...

процесс должен быть приблизительно таким;

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

@Mullih · 06.01.2013, 16:46

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
var $menuElems = $('div[id^="menuElem"]');
 
function onMenuClick(e) {
    var $el = $(this);
        
    var numTo = parseInt($(this).attr('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);
            }
        );
 
    });
}
 
$().ready(function () {
    $menuElems.one('click', onMenuClick);
});

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

$menuElems вынес отдельно чтоб при кождом обращении не производить дополнительный поиск по дом, хоть jq и кэшерует это дело

на клик создал onMenuClick функцию. ей мы и будем подписываться

JavaScript
1
2
3
$().ready(function () {
        $menuElems.one('click', onMenuClick);
    });

подписываемся через one тк нам надо раз словить нажатие а после повторить действия только когда нам сново это понадобиться

собственно в onMenuClick(e)

var $el = $(this); запоминаем текущий див, он нам понабиться в колбеках а там this будет смотреть на другое

далее вычесления по тексту как у вас

после мы создаем новый jq объект но пока его не добавляем к документу, собственно а зачем? )

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

в принципе все))

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

Mullih, спасибо большое, действительно большой

Сообщение от Mullih

труд

))))

Добавлено через 1 минуту
щас попробую еще разобраться и вообще все хорошо будет))

Добавлено через 28 минут

Сообщение от Mullih

var numTo = parseInt($(this).attr('id').replace(/\D+/g, ""));

вот строка не хочет работать)) на this ругается... через $el тоже не могу заставить ее работать))

@Mullih · 06.01.2013, 17:29

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

Mullih, спасибо большое, действительно большой
))))

Добавлено через 1 минуту
щас попробую еще разобраться и вообще все хорошо будет))

Добавлено через 28 минут

вот строка не хочет работать)) на this ругается... через $el тоже не могу заставить ее работать))

так вы же в

JavaScript
1
$menuElems.one('click', onMenuClick(pageWidth, pageHeigth, pageLeft, pageTop));

не подписываетесь а вызываете

попробуйте так

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

, и еще забросьте плиз функцию в $().ready(function () { а то она ругаться будет когда до

JavaScript
1
2
3
4
5
6
function () {
$('.page').remove();
$('.newPage').addClass('page');
$('.page').removeClass('newPage');
$menuElems.one('click', onMenuClick);
}

дойдет

Новые блоги и статьи Все статьи Все блоги /
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(), которая. . .

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

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

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

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

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	06.01.2013, 15:11 [ТС]
	Mullih, а $elems - это типа массив?)) 0

@Grand7 141 / 63 / 11 Регистрация: 19.06.2012 Сообщений: 250
	06.01.2013, 15:16
	z-z, да, там все элементы меню (menuElem1, menuElem2 и т.д.) 1

z-z 170 / 169 / 56 Регистрация: 22.06.2011 Сообщений: 980
	06.01.2013, 15:17 [ТС]
	спасибо, сейчас как нибудь попробую сопоставить... 0

@Mullih 92 / 71 / 8 Регистрация: 05.08.2012 Сообщений: 138
	06.01.2013, 15:41
	html плиз выложите, или было бы лучше чтоб захостили это кудато 0

@Mullih 92 / 71 / 8 Регистрация: 05.08.2012 Сообщений: 138
	06.01.2013, 16:04
	вы хотите чтоб в случае нажатии другой страницы до окончания анимации а. предыдущая анимация завершилась мгновено и выполнилась новая анимация б. предыдущая анимация завершилась анимированно и выполнилась новая анимация в. предыдущая анимация завершилась нормально и пока она не завершиться выбора новой страницы не происходило ------------- когда вы создаете новую страницу она должна создаться до начала анимации или после окончания анимации? 1

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