Страница 2 из 2 < 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)

рони 14.02.2019 12:16
Цитата:
Сообщение от denis_kontarev
А можно реализовать с .toggle();
 
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
   <style type="text/css">
  tbody.st {
    display : table-row-group;
  }
  </style>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$('.spoiler').on('click', '.trigger', function(event) {
   $('.st', event.delegateTarget).toggle();
});
});
  </script>
</head>

<body>
<div class="spoiler">
 <input class="trigger">
  <table>
   <tbody class="st" style="display: none;"><tr>
       <td>ТЕКСТ...</td>
   </tr></tbody>
     </table>
       </div>

<div class="spoiler">
 <input class="trigger">
  <table>
   <tbody class="st" style="display: none;"><tr>
       <td>ТЕКСТ...</td>
   </tr></tbody>
     </table>
       </div>

<div class="spoiler">
 <input class="trigger">
  <table>
   <tbody class="st" style="display: none;"><tr>
       <td>ТЕКСТ...</td>
   </tr></tbody>
     </table>
       </div>

</body>
</html>

laimas 14.02.2019 15:32
рони, а как это может быть при display: table-row-group?

рони 14.02.2019 15:59
Цитата:
Сообщение от laimas
а как это может быть при display: table-row-group?
строка 7 
<style type="text/css">
  tbody.st {
    display : table-row-group;
  }
  </style>

laimas 14.02.2019 16:02
:D А я читаю конец выражения. Да класс переключать можно, у него JQ, значит .toggleClass().

рони 14.02.2019 16:11
Цитата:
Сообщение от laimas
. Да класс переключать можно
 
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  tbody.st {
    display :  none;
  }
  tbody.st.show {
    display : table-row-group;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$('.spoiler').on('click', '.trigger', function(event) {
   $('.st', event.delegateTarget).toggleClass('show');
});
});
  </script>
</head>

<body>
<div class="spoiler">
 <input class="trigger">
  <table>
   <tbody class="st" ><tr>
       <td>ТЕКСТ...</td>
   </tr></tbody>
     </table>
       </div>

<div class="spoiler">
 <input class="trigger">
  <table>
   <tbody class="st" ><tr>
       <td>ТЕКСТ...</td>
   </tr></tbody>
     </table>
       </div>

<div class="spoiler">
 <input class="trigger">
  <table>
   <tbody class="st" ><tr>
       <td>ТЕКСТ...</td>
   </tr></tbody>
     </table>
       </div>

</body>
</html>

Malleys 14.02.2019 17:18
Цитата:
Сообщение от рони 
$(function() {
$('.spoiler').on('click', '.trigger', function(event) {
   $('.st', event.delegateTarget).toggleClass('show');
});
});
Чтобы не вешать обработчик на каждый элемент можно использовать делегирование 
$(document).on("click", ".trigger", function() {
	$(".st", this.parentNode).toggleClass("show");
});


Теперь можно свободно добавлять элементы .spoiler, они будут также функционировать!

denis_kontarev 14.02.2019 17:50
Благодарю ребята! Функции просто божественные!!)) Очень выручили :write:


Часовой пояс GMT +3, время: 17:39.
Страница 2 из 2 < 1 2
Показывать 40 сообщений этой темы на одной странице