Форум

Янковиц · #1 (**permalink**) 19.12.2018, 19:29

Добрый день. Есть разметка:

<div class="group">
   <div class="field parent">
      <div class="title">Тумблер переключения валют<span class="desc">Опция позволяет выводить переключатель валюты.</span></div>
      <div class="control"><input type="checkbox" id="converter" name="converter" value="1" checked="checked" class="switch"><label class="switch-label" for="converter"></label></div>
   </div>
   <div class="field child">
      поле 1
   </div>
   <div class="field child">
      поле 2
   </div>
   <div class="field parent">
      // здесь ещё один тумблер
   </div>
</div>

Подскажите, как скрывать и показывать блоки с классом child при изменении вышележащего чекбокса с классом родителя parent. Скрыть всё до следующего элемента с классом parent. Чекбок активен - child - открыто, не активен, то скрыто.

Янковиц · #2 (**permalink**) 19.12.2018, 19:30

Нужно на jquery. Пока накидал так:

$('.parent').each(function(i, parent) {
	$('input.switch', parent).change(function() {
		console.log( parent );
		$(parent).nextUntil('.parent').filter('.child').toggle(this.checked)
	}).change() 
});

рони · #3 (**permalink**) 19.12.2018, 19:54

Сообщение от Янковиц

Пока накидал так:

нормальный вариант

Янковиц · #4 (**permalink**) 19.12.2018, 19:58

Не работает. Чего-то не хватает

рони · #5 (**permalink**) 19.12.2018, 20:12

Янковиц,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$( ".parent" ).each(function() {
    var el = $(this).nextUntil('.parent'),
    checkbox = $(':checkbox',this);
    checkbox.change(function() {
    el.toggle(this.checked)
  }).change()
 });
});
  </script>
</head>

<body>
<div class="group">
   <div class="field parent">
      <div class="title">Тумблер переключения валют<span class="desc">Опция позволяет выводить переключатель валюты.</span></div>
      <div class="control"><input type="checkbox" id="converter" name="converter" value="1" checked="checked" class="switch"><label class="switch-label" for="converter"></label></div>
   </div>
   <div class="field child">
      поле 1
   </div>
   <div class="field child">
      поле 2
   </div>
    <div class="field parent">
      <div class="title">Тумблер переключения валют<span class="desc">Опция позволяет выводить переключатель валюты.</span></div>
      <div class="control"><input type="checkbox" id="converter" name="converter" value="1"  class="switch"><label class="switch-label" for="converter"></label></div>
   </div>
   <div class="field child">
      поле 1
   </div>
   <div class="field child">
      поле 2
   </div>
</div>

</body>
</html>

Янковиц · #6 (**permalink**) 19.12.2018, 20:19

Благодарю, как всегда выручили

Форум

Справочник

Discord чат

Курсы javascript