Javascript jsjquery重复一个函数

我有一个简单的切换函数，我想重复20多次，有没有一种更优雅的方式来编写它，而不必复制和粘贴相同的函数，也不必反复更改数字

$(document).ready(function(){ 
$( ".p1" ).click(function() {
    $( ".c1" ).toggleClass("open");
    $( ".person" ).toggleClass("fadeout");
    $(this).removeClass('fadeout');
});

$( ".p2" ).click(function() {
    $( ".c2" ).toggleClass("open");
    $( ".person" ).toggleClass("fadeout");
    $(this).removeClass('fadeout');
});

$( ".p3" ).click(function() {
    $( ".c3" ).toggleClass("open");
    $( ".person" ).toggleClass("fadeout");
    $(this).removeClass('fadeout');
});
});

HTML以了解更多上下文：

<div class="group">
 <div class="p1"></div>
 <div class="p2"></div>
 <div class="p3"></div>

 <div class="c1"></div>
 <div class="c2"></div>
 <div class="c3"></div>
</div>

<div class="group">
 <div class="p4"></div>
 <div class="p5"></div>
 <div class="p6"></div>

 <div class="c4"></div>
 <div class="c5"></div>
 <div class="c6"></div>
</div>

这是一个配置文件页面，当你点击p1，然后c1打开，p2，然后c2打开，等等。我用CSS控制转换

---

下面的解决方案有效，但我遇到了另一个问题。当p1、p2等打开时，所有其他p需要淡出。切换似乎造成了一些不一致。

我想一个简单的for循环就可以了

for (let i = 1; i < 20; i++) {
  $( ".p" + i ).click(function() {
     $( ".c" + i ).toggleClass("open");
     $( ".person" ).toggleClass("fadeout");
     $(this).removeClass('fadeout');
  });
}

for（设i=1；i<20；i++）{
$（“.p”+i）。单击（函数（）{
$（“.c”+i）.toggleClass（“打开”）；
$（“.person”）。切换类别（“淡出”）；
$（this.removeClass（'fadeout'）；
});
}

如果没有html代码，您可以编写一个循环：

for(var i=1;i < 20; i++){
  $( ".p" + i ).click(function() {
    $( ".c" +i ).toggleClass("open");
    $( ".person" ).toggleClass("fadeout");
    $(this).removeClass('fadeout');
  });
}

for（变量i=1；i<20；i++）{
$（“.p”+i）。单击（函数（）{
$（“.c”+i）.toggleClass（“打开”）；
$（“.person”）。切换类别（“淡出”）；
$（this.removeClass（'fadeout'）；
});
}

试试这个

$(document).ready(function() { 
 for(let i = 1; i <= 20; i ++) {
    $( ".p" + i ).click(function() {
       $( ".c" + i ).toggleClass("open");
       $( ".person" ).toggleClass("fadeout");
       $(this).removeClass('fadeout');
    });
  }
});

$（文档）.ready（函数（）{
对于（让i=1；我是你先做的。）你应该得到它的分数。这很可能是一种没有丑陋循环的方法，如下面的答案所示，但是你如何构造DOM遍历逻辑将取决于HTML。你能编辑这个问题以包括它的一个示例吗？给我们一些关于“.p”类和“.c”如何构造的上下文类在DOM中结构化。根据此结构，可以使用更有效的解决方案。更新以提供更多上下文