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)
  $('div[id^=step-]').hide();
  $("#step-"+num).fadeIn();
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="step-1-btn">step 1</button>

<button id="step-2-btn">step 2</button>

<button id="step-3-btn">step 3</button>


<div id="step-1">1</div>
<div id="step-2">2</div>
<div id="step-3">3</div>

Answer 2

不要使用从类名、ID 等中剥离出来的敏感整数。这是肮脏的编码并且容易出错。

这里有一个更好的建议，改用 data attribute，其中 fadeIn 的选择器就存储在这样的 data-show 属性中：

$("[data-show]").on("click", function() {
  const selector = $(this).data("show");
  $(selector).fadeIn();
});

.step {
  display: none;
}

<button type="button" data-show="#step-1">1</button>
<button type="button" data-show="#step-2">2</button>
<button type="button" data-show="#step-3">3</button>

<div class="step" id="step-1">Step 1</div>
<div class="step" id="step-2">Step 2</div>
<div class="step" id="step-3">Step 3</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

文档：

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

jQuery - how to create variable and click event with same class name but different number

javascript

class