动态模块的功能清单

问题描述 投票:0回答:2

我试图让使用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>
jquery list dynamic
2个回答
0
投票

像这样的事情?

变化:我已经添加了一行从切换第一删除所有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>

另外,我增加了第三个模块,只是为了显示它的工作原理。


0
投票

流线型与以下行为的代码:

  • 点击一个非活动.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>
© www.soinside.com 2019 - 2024. All rights reserved.