Неработающие событие event

@STBOL · Регистрация: 02.03.2013

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

Всем привет!
Возникла проблема с обработкой события, т.е. все вроде бы хорошо, но если объектом на который кликают будет картинка, то обработчик вернет -1 и как с этим бороться ума не приложу.
Еще есть вопрос о том как к переменной p обратится по индексу (p[i]) и изменить его свойство display, ибо p[i].css('display', 'none'); не работает

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
p = $('.popup__overlay')
count = 0;
//alert(p.length + "\n"+ $('.popup__toggle').length)
$('.popup__toggle').click(function(event) {
    alert($('.popup__toggle').index(event.target));
    //alert(count);
    p.css('display', 'block');
})
p.click(function(event) {
    e = event || window.event
    if (e.target == this) {
        $(p).css('display', 'none')
    }
})
$('.popup__close').click(function() {
    p.css('display', 'none')
})

@Lazy_Den · 22.12.2014, 21:40

STBOL, по поводу "картинки" - не понял, а по второму вопросу (индекс) - метод eq() или такой же селектор в виде псевдокласса: $('p:eq(n)') или $('p').eq(n)

@Vladislav WebDev · 22.12.2014, 21:40

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

Еще есть вопрос о том как к переменной p обратится по индексу (p[i])

p.eq(i)

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

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

разметку покажите, а то не очень понятно что у вас там происходит

@Lazy_Den · 22.12.2014, 21:42

Не обратил сразу внимание, что "p" в вашем случае - это переменная, а не элемент <p>. Поэтому маленькие поправки:

JavaScript
1
2
3
p.eq(n)
// или 
$(p[n])

@STBOL · 22.12.2014, 21:48 **[ТС]**

HTML5
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
<div class="popup__toggle">
    <img src="http://img.youtube.com/vi/essGgCiYrEw/mqdefault.jpg" width="168px" height="125px" />
</div>
<!--[if lt IE 9]><div class="popup__overlay popup__overlay_ie"></div><![endif]-->
<div class="popup__overlay">
    <div class="popup">
        <a href="#" class="popup__close">X</a>
        <h2>Welcome one!</h2>
        <p>Please enter your login and password to continue</p>
        <div class="popup-form__row">
            <label for="popup-form_login">Login</label>
            <input type="text" id="popup-form_login" value="" />
        </div>
        <div class="popup-form__row">
            <label for="popup-form_password">Password</label>
            <input type="password" id="popup-form_password" value="" />
        </div>
        <input type="button" value="Log in" />
    </div>
    <!--[if lt IE 9]><div class="popup__valignfix"></div><![endif]-->
</div>
<div class="popup__toggle">
    <img src="http://img.youtube.com/vi/essGgCiYrEw/mqdefault.jpg" width="168px" height="125px" />
</div>
<!--[if lt IE 9]><div class="popup__overlay popup__overlay_ie"></div><![endif]-->
<div class="popup__overlay">
    <div class="popup">
        <a href="#" class="popup__close">X</a>
        <h2>Welcome two!</h2>
        <p>Please enter your login and password to continue</p>
        <div class="popup-form__row">
            <label for="popup-form_login">Login</label>
            <input type="text" id="popup-form_login" value="" />
        </div>
        <div class="popup-form__row">
            <label for="popup-form_password">Password</label>
            <input type="password" id="popup-form_password" value="" />
        </div>
        <input type="button" value="Log in" />
    </div>
    <!--[if lt IE 9]><div class="popup__valignfix"></div><![endif]-->
</div>

Lazy_Den, Vladislav WebDev, совсем забыл про метод eq.

@Vladislav WebDev · 22.12.2014, 22:13

STBOL, объясните конкретней, что должно быть то при клике?

@STBOL · 22.12.2014, 22:17 **[ТС]**

Vladislav WebDev, Мне нужно при клике на картинку открыть модальное окно все вроде бы хорошо, но при клике на картинку возвращается -1, а при клике на пустое место блок все проходит нормально.

@Vladislav WebDev · 22.12.2014, 22:28

STBOL, если я правильно вас понял, то

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function() {
    p = $('.popup__overlay')
    count = 0;
    $('.popup__toggle').click(function(event) {
            alert($('.popup__toggle').index(this));
            p.css('display', 'block');
    })
    p.click(function(event) {
            e = event || window.event
            if (e.target == this) {
                    $(p).css('display', 'none')
            }
    })
    $('.popup__close').click(function() {
            p.css('display', 'none')
    })
})

@STBOL · 22.12.2014, 22:30 **[ТС]**

Vladislav WebDev, Спасибо!!! я что-то похожее уже писал, но у меня не работало. $(this).index();

@Vladislav WebDev · 22.12.2014, 22: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(), которая. . .

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	22.12.2014, 21:40
	STBOL, по поводу "картинки" - не понял, а по второму вопросу (индекс) - метод eq() или такой же селектор в виде псевдокласса: $('p:eq(n)') или $('p').eq(n) 0

@Vladislav WebDev 327 / 217 / 97 Регистрация: 04.11.2012 Сообщений: 638
	22.12.2014, 22:13
	STBOL, объясните конкретней, что должно быть то при клике? 0

@STBOL 2 / 2 / 0 Регистрация: 02.03.2013 Сообщений: 86
	22.12.2014, 22:17 [ТС]
	Vladislav WebDev, Мне нужно при клике на картинку открыть модальное окно все вроде бы хорошо, но при клике на картинку возвращается -1, а при клике на пустое место блок все проходит нормально. 0

@STBOL 2 / 2 / 0 Регистрация: 02.03.2013 Сообщений: 86
	22.12.2014, 22:30 [ТС]
	Vladislav WebDev, Спасибо!!! я что-то похожее уже писал, но у меня не работало. $(this).index(); 0

@Vladislav WebDev 327 / 217 / 97 Регистрация: 04.11.2012 Сообщений: 638
	22.12.2014, 22:31
	Всегда пожалуйста 0

Неработающие событие event

Решение