Функция click в цикле
Здравствуйте друзья. Помогите пожалуйста разобраться. У нас есть скрипт.
<script type="text/javascript"> $('.trigger').click(function() { $('.st').toggle(); }); </script> При нажатии на элемент с классом trigger <input class="trigger"> У tbody <tbody class="st" style="display: none;">ТЕКСТ...</tbody> Меняется style на <tbody class="st" style="display: table-row-group;">ТЕКСТ...</tbody> Проблема заключается в том, что этих tbody много <input class="trigger"> <tbody class="st" style="display: none;">ТЕКСТ...</tbody> <input class="trigger"> <tbody class="st" style="display: none;">ТЕКСТ...</tbody> <input class="trigger"> <tbody class="st" style="display: none;">ТЕКСТ...</tbody> Допустим при нажатии на первый элемент с классом trigger, мы получаем <input class="trigger"> <tbody class="st" style="display: table-row-group;">ТЕКСТ...</tbody> <input class="trigger"> <tbody class="st" style="display: none;">ТЕКСТ...</tbody> <input class="trigger"> <tbody class="st" style="display: none;">ТЕКСТ...</tbody> То есть меняется style в первом tbody, но если нажать на второй элемент в классом trigger ничего не происходит, пока снова не нажмем на первый элемент, чтобы изменился второй. Как сделать чтобы скрипт работал для каждого элемента с классом trigger и tbody не зависели друг от друга. Нажали на первый элемент получили style="display: table-row-group;", нажали на третий элемент получили style="display: table-row-group;" и так далее. |
Цитата:
Текущий код должен работать следующим образом: При нажатии на любой элемент с классом .trigger изменить видимость на противоположную для всех элементов с классом .st . <table> не может иметь прямых потомков с тэгом <input>. <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <input class="trigger" data-target="st-1"> <div class="st" style="display: none;" data-name="st-1">ТЕКСТ...</div> <input class="trigger" data-target="st-2"> <div class="st" style="display: none;" data-name="st-2">ТЕКСТ...</div> <input class="trigger" data-target="st-3"> <div class="st" style="display: none;" data-name="st-3">ТЕКСТ...</div> <script> $('[data-target].trigger').click(function(){ $('[data-name="'+this.dataset.target+'"]').toggle(); }); </script> |
Полная структура html
Соглашусь. Привел не полный код. Вот полная структура. Нам необходимо менять style в tbody при нажатии на class="trigger" для каждого tbody. На каждой странице разное количество <div class="spoiler">, бывает 10, а бывает 50. Отображение в цикле идет. При нажатии на <input class="trigger"> для всех элементов с классом st видимость менять не нужно. Необходимо поменять видимость при нажатии на <input class="trigger"> именно для того номера div, где это произошло, чтоб они друг от друга не зависели.
<div class="spoiler"> <input class="trigger"> <table> <tbody class="st" style="display: none;">ТЕКСТ...</tbody> </table> </div> <div class="spoiler"> <input class="trigger"> <table> <tbody class="st" style="display: none;">ТЕКСТ...</tbody> </table> </div> <div class="spoiler"> <input class="trigger"> <table> <tbody class="st" style="display: none;">ТЕКСТ...</tbody> </table> </div> |
$('.trigger').click(function() { $(this).next().css({display: здесь можно организовать скрыть/закрыть, это нужно?}); }); |
А можно реализовать с .toggle();
Цитата:
|
Цитата:
В общем это ведь не сложно, определите .data({mode: 0}) для кнопок, а в обработчике: $('.trigger').click(function() { var o = $(this), d = o.data('mode') ^ 1; o.data({mode: d}).next().css({display: ['none','table-row-group'][d]}); }); и будет то же самое, но с другими стилями. <style> .box { display: none; width: 50px; height: 50px; background: #000; } </style> <button data-mode="0">Show/Hide</button> <div class="box"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $('[data-mode]').click(function() { var o = $(this), d = o.data('mode') ^ 1; o.data({mode: d}).next().css({display: ['none', 'block'][d]}) }) </script> |
laimas благодарю за ответ, дома попробую реализовать:) и сообщу вам как получилось
|
Спасибо за отклик
Цитата:
|
Цитата:
o.data({mode: d}).next().find('СЕЛЕКТОР НУЖНОГО').css({display: ['none', 'block'][d]}) |
Цитата:
|
Часовой пояс GMT +3, время: 01:55. |