Question

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

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

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

单击无效的#include<stdio.h> #include<sys/types.h> #include<sys/shm.h> #include<sys/ipc.h> #include<unistd.h> #include<time.h> #include<sys/mman.h> #include <stdio.h> #include<stdlib.h> #include<string.h> #include<fcntl.h> #include<sys/stat.h> int main(){ const char *name = "OS"; long *ptr; pid_t childPid; childPid = fork(); int shm; if(childPid == 0){ char *args[] ={"ls","-l",NULL}; int shmid; int shsize = 5000000; key_t key; char *s; key = 9876; if(shmid < 0){ printf("error getting shmid"); exit(1); } shm = shm_open(name,O_CREAT| O_RDWR,0666); if(shm == (char *) -1){ printf("error getting shared memory"); exit(1);} time_t startTime; gettimeofday(&startTime,0); ptr = (long *) mmap(0,sizeof(startTime),PROT_READ | PROT_WRITE,MAP_SHARED,shm,0); ptr+=startTime; time_t endTime; execvp(args[0],args); printf("successfuly created child proceess"); exit(0); } else if (childPid <0){ printf("unsuccessfuly created child proccess"); } else{ int returnStatus; waitpid(childPid,&returnStatus,0); if(returnStatus == 0){ printf("The chiild terminated normally"); printf("%s",ptr); shm_unlink(name); } if(returnStatus == 1){ printf("The child terminated with error"); } } }，最后匹配的Project -> Preferences -> Debug -> Enable Visual Studio hosting process和所有先前的.module-toggle将突出显示。
如果单击活动的.module-features li，则所有li都不会突出显示。
添加了一个额外的模块，以表明它易于扩展（无需修改jQuery代码）。

演示

.module-toggle

li

$('.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');
  }
});

动态模块功能清单

2 个答案:

演示