Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Особенности выборки элементов массива в jQuery (https://javascript.ru/forum/misc/56941-osobennosti-vyborki-ehlementov-massiva-v-jquery.html)

сфздщсл 11.07.2015 01:03

Особенности выборки элементов массива в 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");
});


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

Deff 11.07.2015 01:18

сфздщсл,
Выложите лучше HTML кликабельных и обрабатываемых элементов
Ибо много текста у Вас

сфздщсл 11.07.2015 01:34

<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.

Deff 11.07.2015 01:55

$('.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(); 
});

сфздщсл 11.07.2015 02:34

Задача не в том,чтоб переключить 4 класса.Нужно заставить переключение срабатывать не на всех элементах класса underLine,а на том на который в конкретный момент кликнули и применить функцию к только к его дочернему элементу itemsWrap не задевая остальные.

Deff 11.07.2015 02:35

сфздщсл,
Вы оттестили выданный код ? (вместо Вашего длинного ) Дайте ссылку на демку

сфздщсл 11.07.2015 02:50

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

В таком виде работает.Я так понимаю .next() выбирает следующий элемент в DOM?А как быть в случае если он не следующий?

Deff 11.07.2015 03:01

Цитата:

Сообщение от сфздщсл
Я так понимаю .next() выбирает следующий элемент в DOM?

Да следущий,
Цитата:

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

сфздщсл 11.07.2015 03:07

Благодарю Вас.Вы мне очень помогли.

kostyanet 11.07.2015 06:42

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

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


Часовой пояс GMT +3, время: 11:26.