Контрольный список возможностей динамического модуля

Question

Я пытаюсь создать какой-то динамический контрольный список с использованием jQuery, но сталкиваюсь с некоторыми проблемами, которые не могу решить из-за полного отсутствия навыков написания сценариев.Текущее состояние кода можно найти ниже.

Основная идея заключается в том, что к «модулю-1» подключен набор функций, а «модуль-2» имеет те же функции, что и «модуль-1».1 ", но также с некоторыми дополнительными функциями, поэтому функции" module-1 "должны оставаться видимыми при выборе" module-2 ".До сих пор мне удавалось лишь выделить функции для каждого модуля отдельно, но не вместе.

Важная деталь: я хотел сохранить максимально гибкий сценарий.Вполне возможно, что в будущем будет 3 или 4 модуля, всегда добавляющих возможности предыдущего модуля.

Как можно было бы сделать это?

Спасибо зазаранее!

var module_group = $('.module-group');

$(module_group).each(function() {
  var module_box = $(this).children('.module-toggle'); 
  $(module_box).click(function() {
    $(this).parent('.module-group').children('.module-toggle').removeClass('module-toggle--on');
    $(this).addClass('module-toggle--on');           
    if ($(this).hasClass('module-toggle--on')) { 
      var data_value = $(this).attr('data-id');
      
      $(this).parent().children('.module-features').find('li').each(function() {
        if ($(this).hasClass(data_value)) {
          $(this).addClass('checked');
        } else {
          $(this).removeClass('checked');
        }
      });
    };
  });
});

.checked {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="module-group">
  <div class="module-toggle module-toggle--on" data-id="module-1">
    Module 1
  </div>
  <div class="module-toggle module-toggle--on" data-id="module-2">
    Module 2
  </div>
  <div class="module-features">
    <ul>
      <li class="module-1">Module 1 feature</li>
      <li class="module-1">Module 1 feature</li>
      <li class="module-1">Module 1 feature</li>
      <li class="module-2">Module 2 feature</li>
      <li class="module-2">Module 2 feature</li>
      <li class="module-2">Module 2 feature</li>
     </ul>
  </div>
</div>

Answer 1

Оптимизирован код со следующим поведением:

• Нажмите неактивный .module-toggle, и последнее совпадение .module-features li и все предыдущие li будут выделены.

• Если активная .module-toggle нажата, все li не выделены.

• Был добавлен дополнительный модуль, чтобы показать, что он легко расширяется(Не требуется никаких изменений в коде jQuery).

---

Демо

$('.module-toggle').on('click', function() {
  var id = $(this).data('id');
  var last = $('.module-features .' + id + ':last');
  if ($(this).hasClass('checked')) {
    $('.module-toggle').removeClass('checked');
    $('.module-features li').removeClass('checked');
  } else {
    $('.module-toggle').removeClass('checked');
    $(this).addClass('checked');
    $('.module-features li').removeClass('checked');
    last.prevAll('li').add(last).addClass('checked');
  }
});

li.checked {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="module-group">
  <div class="module-toggle module-toggle--on" data-id="module-1">
    Module 1
  </div>
  <div class="module-toggle module-toggle--on" data-id="module-2">
    Module 2
  </div>
  <div class="module-toggle module-toggle--on" data-id="module-3">
    Module 3
  </div>
  <div class="module-features">
    <ul>
      <li class="module-1">Module 1 feature</li>
      <li class="module-1">Module 1 feature</li>
      <li class="module-1">Module 1 feature</li>
      <li class="module-2">Module 2 feature</li>
      <li class="module-2">Module 2 feature</li>
      <li class="module-2">Module 2 feature</li>
      <li class="module-3">Module 3 feature</li>
      <li class="module-3">Module 3 feature</li>
      <li class="module-3">Module 3 feature</li>
    </ul>
  </div>
</div>

Answer 2

Как-то так?

Изменения: я добавил строку, которая сначала удаляет все классы checked из переключателей.На этом уровне никогда раньше не было, но я добавлю их чуть ниже:

$(".module-toggle").removeClass('checked');

Теперь ни один из переключателей модуля не выделен.Затем я добавил строку, которая добавляет класс checked к переключателю, по которому был произведен щелчок, в то время как this по-прежнему сам переключатель, а не дочерние элементы при итерации этих

$(this).addClass('checked');

Это всевам нужно изменить.Селекторы функций модуля могут просто пропустить деталь (this).parent().children и начать с $('.module-features'), с тем же результатом, но он работает так же, как и он.

var module_group = $('.module-group');

$(module_group).each(function() {
  var module_box = $(this).children('.module-toggle'); 
  $(module_box).click(function() {
    $(this).parent('.module-group').children('.module-toggle').removeClass('module-toggle--on');
    $(this).addClass('module-toggle--on');           
    if ($(this).hasClass('module-toggle--on')) { 
      var data_value = $(this).attr('data-id');
      $(".module-toggle").removeClass('checked');
      $(this).addClass('checked');
      $(this).parent().children('.module-features').find('li').each(function() {
        if ($(this).hasClass(data_value)) {
          $(this).addClass('checked');
        } else {
          $(this).removeClass('checked');
        }
      });
    };
  });
});

.checked {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="module-group">
  <div class="module-toggle module-toggle--on" data-id="module-1">
    Module 1
  </div>
  <div class="module-toggle module-toggle--on" data-id="module-2">
    Module 2
  </div>
  <div class="module-toggle module-toggle--on" data-id="module-3">
    Module 3
  </div>
  <div class="module-features">
    <ul>
      <li class="module-1">Module 1 feature</li>
      <li class="module-1">Module 1 feature</li>
      <li class="module-1">Module 1 feature</li>
      <li class="module-2">Module 2 feature</li>
      <li class="module-2">Module 2 feature</li>
      <li class="module-2">Module 2 feature</li>
      <li class="module-3">Module 3 feature</li>
      <li class="module-3">Module 3 feature</li>
      <li class="module-3">Module 3 feature</li>
     </ul>
  </div>
</div>

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