时间戳

首页 > 解决方案 > 相同的功能不同的数字

javascript - 相同的功能不同的数字

问题描述

谁能帮我？如果单击按钮 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);
});

标签： javascriptjquery

解决方案

你去：

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。其余的功能将是相同的。

推荐阅读