Функция click в цикле

[denis_kontarev]

Здравствуйте друзья. Помогите пожалуйста разобраться. У нас есть скрипт.

<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;" и так далее.

[Nexus]

То есть меняется style в первом tbody, но если нажать на второй элемент в классом trigger ничего не происходит, пока снова не нажмем на первый элемент, чтобы изменился второй.

У вас код отличается от того, что вы продемонстрировали?
Текущий код должен работать следующим образом:
При нажатии на любой элемент с классом .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>

[denis_kontarev]

Соглашусь. Привел не полный код. Вот полная структура. Нам необходимо менять 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>

[laimas]

$('.trigger').click(function() {
   $(this).next().css({display: здесь можно организовать скрыть/закрыть, это нужно?});
});

[denis_kontarev]

$('.trigger').click(function() {
   $(this).next().css({display: здесь можно организовать скрыть/закрыть, это нужно?});
});

А можно ли это как то реализовать с .toggle(); что при повторном нажатии на элемент с классом trigger, менялось допустим с невидимого на видимый и обратно с видимого на невидимый.

[laimas]

менялось допустим с невидимого на видимый и обратно с видимого на невидимый.

Ну если бы у вас была задача определить display как block/none, то есть .slideToggle(), но у вас то не block нужно задавать, а table-row-group.

В общем это ведь не сложно, определите .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>

[denis_kontarev]

laimas благодарю за ответ, дома попробую реализовать и сообщу вам как получилось

[denis_kontarev]

$('.trigger').click(function() {
    var o = $(this), d = o.data('mode') ^ 1; 
    o.data({mode: d}).next().css({display: ['none','table-row-group'][d]});
});

К сожалению не тот функционал Все работает замечательно, но только для div, а нужно строго чтоб менялся стиль в tbody, скорей всего это из за .next().css так как переходит на след элемент. А tbody элементов через 3-4

[laimas]

К сожалению не тот функционал

Функционал который и требуется, а вот поиск нужного, так как вы показываете и описывается на это и ... Укажите нужное в таблице, в коде ее возвращает .next() (если конечно структура такая как ранее была показана):

o.data({mode: d}).next().find('СЕЛЕКТОР НУЖНОГО').css({display: ['none', 'block'][d]})

[denis_kontarev]

o.data({mode: d}).next().find('СЕЛЕКТОР НУЖНОГО').css({display: ['none', 'block'][d]})

О дааа! Спасибо за пояснение! Работает как по часам! Огромное вам спасибо!!