动态模块功能清单

Question

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

基本思想是“模块1”具有一组功能，而“模块2”具有与“模块1”相同的功能，但也有一些附加功能，因此“模块1”选择“模块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

像这样吗

更改：我添加了一行，该行首先从切换中删除了所有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将突出显示。

• 如果单击活动的.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>