Javascript-форум - Функция click в цикле

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Функция click в цикле (https://javascript.ru/forum/misc/76787-funkciya-click-v-cikle.html)

denis_kontarev

13.02.2019 11:13

Функция 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;" и так далее.

Nexus

13.02.2019 11:26

Цитата:

Сообщение от denis_kontarev

То есть меняется 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

13.02.2019 11:37

Полная структура 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>

laimas

13.02.2019 11:46

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

denis_kontarev

13.02.2019 12:10

А можно реализовать с .toggle();

Цитата:

Сообщение от laimas (Сообщение 503576)

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

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

laimas

13.02.2019 12:18

Цитата:

Сообщение от denis_kontarev

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

Ну если бы у вас была задача определить 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

13.02.2019 12:56

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

denis_kontarev

14.02.2019 09:08

Спасибо за отклик

Цитата:

Сообщение от laimas (Сообщение 503581)

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

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

laimas

14.02.2019 10:09

Цитата:

Сообщение от denis_kontarev

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

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

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

denis_kontarev

14.02.2019 11:53

Цитата:

Сообщение от laimas (Сообщение 503608)

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

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

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

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице