如何在jQuery/Javascript中简化这些多个/类似的点击事件？

我的页面上有几个按钮，我正在为它们分配类似的点击事件。下面的代码工作得很好，但是有没有一种方法可以循环/简化下面的重复块？我尝试了一个for循环，但没有成功

var functionName = "step";

$("#stepbox1").click(function(){
$("#step1").show();                    
$("#stepswrapper section").not("#step1").hide();
$("#stepbox1").addClass("stepboxactive");
$("#stepboxmain div").not("#stepbox1").removeClass("stepboxactive");
myFunctions[functionName + 1]();
});

$("#stepbox2").click(function(){
$("#step2").show();                    
$("#stepswrapper section").not("#step2").hide();
$("#stepbox2").addClass("stepboxactive");
$("#stepboxmain div").not("#stepbox2").removeClass("stepboxactive");
myFunctions[functionName + 2]();
});

$("#stepbox3").click(function(){
$("#step3").show();                    
$("#stepswrapper section").not("#step3").hide();
$("#stepbox3").addClass("stepboxactive");
$("#stepboxmain div").not("#stepbox3").removeClass("stepboxactive");
myFunctions[functionName + 3]();
});

// And another three of those…

此循环将不起作用：

for (i = 1; i < 7; i++) {
$("#stepbox" + i).click(function(){
$("#step" + i).show();                     
$("#stepswrapper section").not("#step" + i).hide();
$("#stepbox" + i).addClass("stepboxactive");
$("#stepboxmain div").not("#stepbox" + i).removeClass("stepboxactive");
myFunctions[functionName + i]();
});
}

（i=1；i<7；i++）的

{
$（“#步进框”+i）。单击（函数（）{
$（“#步骤”+i）.show（）；
$（“#stepswraper section”）.not（“#step”+i.hide（）；
$（“#stepbox”+i）.addClass（“stepboxactive”）；
$（“#stepboxmain div”）.not（“#stepbox”+i）.removeClass（“stepboxactive”）；
myFunctions[functionName+i]（）；
});
}

您可以使用

div[id*=stepbox]

检索divx数组，因为它们的id中都有

stepbox

公用项。然后您可以获得每个元素的索引，并在代码的其余部分中使用它。（这是一个基于0的数组，因此我在开头添加了+1）

---

如果您可以更新HTML，那么这里有一个更干净的方法：

<div id="stepbox1" class="stepboxactive stepbox" data-box-id="1">
  <strong>Step 1</strong><br />
  Your name
</div>
<div id="stepbox2" class="stepbox" data-box-id="2">
  <strong>Step 2</strong><br />
  Divider
</div>
<div id="stepbox3" class="stepbox" data-box-id="3">
  <strong>Step 3</strong><br />
  Font
</div>
<div id="stepbox4" class="stepbox" data-box-id="4">
  <strong>Step 4</strong><br />
  Shapes
</div>
<div id="stepbox5" class="stepbox" data-box-id="5">
  <strong>Step 5</strong><br />
  Color
</div>
<div id="stepbox6" class="stepbox" data-box-id="6">
  <strong>Step 6</strong><br />
  Export it
</div>

---

您应该使用闭包保持对

i

变量的访问：

for (i = 1; i < 7; i++) {
    $("#stepbox" + i).click((function (j) { // create the closure here
        return function () {
            // now work with `j` instead of `i`
            $("#step" + j).show();
            $("#stepswrapper section").not("#step" + j).hide();
            $("#stepbox" + j).addClass("stepboxactive");
            $("#stepboxmain div").not("#stepbox" + j).removeClass("stepboxactive");
            myFunctions[functionName + j]();
        };
    }(i))); // pass the `i` variable to closure
}

（i=1；i<7；i++）的

{
$（“#stepbox”+i）。单击（（函数（j）{//在此处创建闭包
返回函数（）{
//现在用'j'而不是'i'来工作`
$（“#步骤”+j）.show（）；
$（“#stepswraper section”）.not（“#step”+j）.hide（）；
$（“#stepbox”+j）.addClass（“stepboxactive”）；
$（“#stepboxmain div”）.not（“#stepboxmain div”）.removeClass（“stepboxactive”）；
myFunctions[functionName+j]（）；
};
}（i） ）；//将'i'变量传递给闭包
}

按钮实际上是div，而不是按钮：步骤1
你的名字步骤2
分隔符步骤3
字体步骤4
形状步骤5
颜色步骤6
导出它添加HTML很好，您只需要缩进它，这样StackOverflow就会将它呈现为CodeRox。这在不改变html的情况下工作得很好。很好的方法。我从未使用过数据属性，因此您的方法不仅非常有效，而且对我的学习也非常有帮助。

$(".stepbox").click(function() {
  var id = $(this).data('box-id');

  $("#step"+id).show();                    
  $("#stepswrapper section").not("#step"+id).hide();
  $("#stepbox"+id).addClass("stepboxactive");
  $("#stepboxmain div").not("#stepbox"+id).removeClass("stepboxactive");
  myFunctions[functionName + id]();
});

for (i = 1; i < 7; i++) {
    $("#stepbox" + i).click((function (j) { // create the closure here
        return function () {
            // now work with `j` instead of `i`
            $("#step" + j).show();
            $("#stepswrapper section").not("#step" + j).hide();
            $("#stepbox" + j).addClass("stepboxactive");
            $("#stepboxmain div").not("#stepbox" + j).removeClass("stepboxactive");
            myFunctions[functionName + j]();
        };
    }(i))); // pass the `i` variable to closure
}