Неработающие событие 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): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .

@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

Решение