Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.07.2015, 01:03
Новичок на форуме
Отправить личное сообщение для сфздщсл Посмотреть профиль Найти все сообщения от сфздщсл
 
Регистрация: 11.07.2015
Сообщений: 6

Особенности выборки элементов массива в jQuery
$('.underLine:eq(0)').on('click', function(e){
$('.itemsWrap:eq(0)').addClass("zoomIn open").removeClass("zoomOut closE");
});

$('.underLine:eq(1)').on('click', function(e){
$('.itemsWrap:eq(1)').addClass("zoomIn open").removeClass("zoomOut closE");
});

$('.underLine:eq(2)').on('click', function(e){
$('.itemsWrap:eq(2)').addClass("zoomIn open").removeClass("zoomOut closE");
});

$('.underLine:eq(3)').on('click', function(e){
$('.itemsWrap:eq(3)').addClass("zoomIn open").removeClass("zoomOut closE");
});


Как заставить обработчик событий отслеживать элемент на котором случилось событие без перечисления их индексов,т.е чтоб он сам определил его и применил событие только к нему не затрагивая другие элементы этого массива???
Ответить с цитированием
  #2 (permalink)  
Старый 11.07.2015, 01:18
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

сфздщсл,
Выложите лучше HTML кликабельных и обрабатываемых элементов
Ибо много текста у Вас
Ответить с цитированием
  #3 (permalink)  
Старый 11.07.2015, 01:34
Новичок на форуме
Отправить личное сообщение для сфздщсл Посмотреть профиль Найти все сообщения от сфздщсл
 
Регистрация: 11.07.2015
Сообщений: 6

<div class="underLine"></div>
<div class="itemsWrap animated">
.................................................. .......
</div>
<div class="underLine"></div>
<div class="itemsWrap animated">
.................................................. .......
</div>
<div class="underLine"></div>
<div class="itemsWrap animated">
.................................................. .......
</div>


Кликабельный очень большой.Принцип такой-при клике на underLine раскрывается itemsWrap.Я просто не могу понять как заставить сработать событие на конкретном underLine.
Ответить с цитированием
  #4 (permalink)  
Старый 11.07.2015, 01:55
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

$('.underLine').on('click', function(){
  //Не пому нафиг надо переключать четыре  класса ?
  $(this).next().toggleClass('zoomIn open').toggleClass('zoomOut closE').toggle(); 
});


Типично переключается единственный класс
Доcтаточно для любых css манипуляций, посколь есть псевдо-класс not:active
$('.underLine').on('click', function(){
  $(this).next().toggleClass('active').toggle(); 
});

Последний раз редактировалось Deff, 11.07.2015 в 01:59.
Ответить с цитированием
  #5 (permalink)  
Старый 11.07.2015, 02:34
Новичок на форуме
Отправить личное сообщение для сфздщсл Посмотреть профиль Найти все сообщения от сфздщсл
 
Регистрация: 11.07.2015
Сообщений: 6

Задача не в том,чтоб переключить 4 класса.Нужно заставить переключение срабатывать не на всех элементах класса underLine,а на том на который в конкретный момент кликнули и применить функцию к только к его дочернему элементу itemsWrap не задевая остальные.
Ответить с цитированием
  #6 (permalink)  
Старый 11.07.2015, 02:35
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

сфздщсл,
Вы оттестили выданный код ? (вместо Вашего длинного ) Дайте ссылку на демку
Ответить с цитированием
  #7 (permalink)  
Старый 11.07.2015, 02:50
Новичок на форуме
Отправить личное сообщение для сфздщсл Посмотреть профиль Найти все сообщения от сфздщсл
 
Регистрация: 11.07.2015
Сообщений: 6

$('.underLine').on('click', function(){
$(this).next().addClass('zoomIn open');
});

В таком виде работает.Я так понимаю .next() выбирает следующий элемент в DOM?А как быть в случае если он не следующий?
Ответить с цитированием
  #8 (permalink)  
Старый 11.07.2015, 03:01
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от сфздщсл
Я так понимаю .next() выбирает следующий элемент в DOM?
Да следущий,
Цитата:
А как быть в случае если он не следующий?
Приводите реальный HTML код и описывайте задачу.
Посмотрите справочник: http://jquery.page2page.ru/index.php...траница
- Слево: карта функций для начала: Cелекторы и Работа с набором
Вообще для jQuery есть свой раздел тут на форуме: http://javascript.ru/forum/jquery/

Последний раз редактировалось Deff, 11.07.2015 в 03:04.
Ответить с цитированием
  #9 (permalink)  
Старый 11.07.2015, 03:07
Новичок на форуме
Отправить личное сообщение для сфздщсл Посмотреть профиль Найти все сообщения от сфздщсл
 
Регистрация: 11.07.2015
Сообщений: 6

Благодарю Вас.Вы мне очень помогли.
Ответить с цитированием
  #10 (permalink)  
Старый 11.07.2015, 06:42
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Местные специалисты называют этот прием - делегирование.

Надо просто по event.target получать элемент который щелкнули внутри элемента который прослушивается.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сравнение элементов массива nikola_blin Events/DOM/Window 5 22.05.2015 10:25
JQuery, анимация для нескольких элементов сразу, возможно ли? Logo jQuery 21 29.05.2012 21:50
JQuery и JS - динамичность элементов MCTrane jQuery 1 26.10.2010 21:41
jquery атрибуты Элементов igsavenko jQuery 4 26.05.2010 18:11
jQuery Изменение цвета дочерних элементов libinstyle Общие вопросы Javascript 2 24.03.2010 04:46