Javascript.RU

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

Событие срабатывает по всем найденным классам документа, как исправить?
Кто может подсказать как решить задачу:

Есть несколько div-блоков с одинаковыми классами. нужно чтобы по клику срабатывал только блок в котором происходит клик.
Вот пример:


<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<meta charset="UTF-8">

</head>
<body>

<div class="block-x">
<a class="trigger">Hide/Show News</a>
<div class="aaa" style="">
Закрыть
</div>
<div class="bbb" style="display: none;">
Открыть
</div>
</div>

<div class="block-x">
<a class="trigger">Hide/Show News</a>
<div class="aaa" style="">
Закрыть
</div>
<div class="bbb" style="display: none;">
Открыть
</div>
</div>

<div class="block-x">
<a class="trigger">Hide/Show News</a>
<div class="aaa" style="">
Закрыть
</div>
<div class="bbb" style="display: none;">
Открыть
</div>
</div>

<div class="block-x">
<a class="trigger">Hide/Show News</a>
<div class="aaa" style="">
Закрыть
</div>
<div class="bbb" style="display: none;">
Открыть
</div>
</div>



<script>
$('.trigger').click(function() {
   $('.aaa').toggle();
   $('.bbb').toggle();
});
</script>



<style>
.block-x {
    display: inline-block;
}
a.trigger {
    display: block;
    text-align: center;
    cursor: grab;
}
.bbb {
    display: block;
    width: 100px;
    height: 100px;
    margin: 20px;
    padding: 20px;
    background: #39efef;
}

.aaa {
    display: block;
    width: 100px;
    height: 100px;
    margin: 20px;
    padding: 20px;
    background: #39ef58;
}
</style>


</body></html>
Ответить с цитированием
  #2 (permalink)  
Старый 18.09.2020, 21:05
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 864

<script>
$('.trigger').click(function() {
   $('.aaa', this.parentNode).toggle();
   $('.bbb', this.parentNode).toggle();
});
</script>
Ответить с цитированием
  #3 (permalink)  
Старый 18.09.2020, 21:08
Аватар для flash12320
Новичок на форуме
Отправить личное сообщение для flash12320 Посмотреть профиль Найти все сообщения от flash12320
 
Регистрация: 18.09.2020
Сообщений: 6

Тыщу раз с "this" эксперементировал но не получалось)
Спасибо, все заработало.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно подавить событие при подключении своего обработчика? Маэстро Firefox/Mozilla 2 03.09.2011 11:46
Как заставить событие сработать один раз GRean Javascript под браузер 4 07.06.2010 00:29
Плагин JQuery tabs как подписаться нв событие перекл.вкладок xela1980 jQuery 6 15.12.2009 18:00
Как можно программно вызвать событие documenta onafterupdate nikolay84 Events/DOM/Window 1 08.07.2009 02:13
как проверить поддеружет браузер определенное событие? GOll Элементы интерфейса 9 24.07.2008 14:40