Javascript 相同的函数具有不同的数字

谁能帮我？ 我有30个按钮，如果你点击按钮1，元素1必须显示，如果你点击按钮2，元素2必须显示。等等

现在，我不想用不同的数字将相同的代码重复30次（示例1）。我认为它可以更短（示例2）

有人知道我怎样才能做到最好吗

例1：

$("#O1").click(function() {
  KSlevel = 1;
  alert(KSlevel);
  $('#ks' + KSlevel).fadeIn(200);
});

$("#O2").click(function() {
  KSlevel = 2;
  alert(KSlevel);
  $('#ks' + KSlevel).fadeIn(200);
});

例2：

$("#OX").click(function() {
  KSlevel = X;
  alert(KSlevel);
  $('#ks' + KSlevel).fadeIn(200);
});

好了：

HTML:

<button class="test" id="1">click</button>
<p id="p1" style="display: none;">1</p>

<button class="test" id="2">click</button>
<p id="p2" style="display: none;">2</p>

<button class="test" id="3">click</button>
<p id="p3" style="display: none;">3</p>

<button class="test" id="4">click</button>
<p id="p4" style="display: none;">4</p>

$('.test').click((e)=>{
     $(`#p${e.target.id}`).fadeIn();
});

---

您还可以在HTML的onClick属性上运行函数，并在函数的参数中添加id。函数的其余部分将是相同的。

您可以轻松地对其进行泛化，但这取决于HTML的结构；按钮与淡入的元素有何关联？你能在问题中展示一个HTML的简短示例吗和

$（“[id^=O]”）。单击（

您可以查看此示例，它将为您指明正确的方向