jQuery - 如何创建具有相同类名但不同编号的变量和单击事件

Question

有没有一种方法可以将多个变量和单击事件分组到一个函数中？

我只想有一个函数来调用具有相同名称但不同数字（本例中为 1 到 3）的所有类，因此我不必创建多个这样的函数：

function step1() {
  $("#step-1").fadeIn();
}

function step2() {
  $("#step-2").fadeIn();
}

function step3() {
  $("#step-3").fadeIn();
}

和

$("#step-1-btn").click(function(){
  step1();
});

$("#step-2-btn").click(function(){
  step2();
});

$("#step-3-btn").click(function(){
  step3();
});

我确信这个问题已经有了答案，但我无法用足够好的措辞来找到它......

Answer 1

我并不是 100% 清楚你想要实现什么，但你可以尝试这样的事情：

$("button[id^=step-]").click(function() {
  var id = $(this).attr("id").split('-')[1]
  step(id);
});

function step(num) {
  console.log("you called step with number:" + num)
}

单击事件适用于以 开头的任何id按钮step-。然后它会分割 id 并从中取出数字并将其传递给您的函数。

演示（以淡入淡出为例）

$("button[id^=step-]").click(function() {
  var id = $(this).attr("id").split('-')[1]
  step(id);
});

function step(num) {
  console.log("you called step with number:" + num)
}

$("button[id^=step-]").click(function() {
  var id = $(this).attr("id").split('-')[1]
  step(id);
});

function step(num) {
  console.log("you called step with number:" + num)
  $('div[id^=step-]').hide();
  $("#step-"+num).fadeIn();
}

#step-1,#step-2,#step-3 {
  height:200px;
  width:200px;
  display:none;
  background-color:yellow;
}