相同的功能不同的数字答案

【问题标题】：Same function with different numbers相同的功能不同的数字
【发布时间】：2020-01-03 20:27:22
【问题描述】：

谁能帮助我？如果您单击按钮 1，我有 30 个按钮，如果您单击按钮 2，则元素 1 必须显示，元素 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 的结构；按钮如何与您淡入的元素相关联？您能否在问题中显示一个简短的 HTML 示例。
你可以做KSlevel= $(this).attr("id").replace("O",""); 和$( "[id^=O]" ).click( 你可以看看这个例子，它会为你指明正确的方向stackoverflow.com/questions/42411120/…

标签： javascript jquery

【解决方案1】：

你去吧：

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>

JQuery：

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

您也可以在 HTML 的 onClick 属性上运行一个函数，并在函数的参数中添加一个 id。其余功能相同。

【讨论】：