动态模块功能检查表

Question

我正试着用jQuery做一个动态清单，但遇到了一些问题，由于我完全缺乏脚本编写技能，我似乎无法解决这些问题。代码的当前状态可以在下面找到。

基本思想是有一组附加到"module-1“的功能，而"module-2”具有与"module-1“相同的功能，但也有一些额外的功能，因此当"module-2”被选中时，"module-1“功能应该仍然可见。到目前为止，我只能让每个模块的功能单独突出显示，但不能一起突出显示。

重要细节:我希望尽可能保持脚本的灵活性。未来很有可能会有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

像这样的东西？

更改:我添加了一行代码，它首先从切换中删除所有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>

​

此外，我添加了第三个模块，只是为了显示它的工作。

Answer 2

使用以下行为简化了代码：

• 单击非活动的.module-toggle，最后一个匹配的.module-features li和所有以前的li将突出显示。

如果单击active .module-toggle，则

• 全部为unhighlighted.

• 添加了一个额外的模块，以显示其易于扩展(不需要修改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>

​