Question

我的页面上有几个按钮，我正在分配类似的点击事件。下面的代码工作正常，但有没有办法可以循环/简化下面的重复块？我试过一个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]();
});
}

Answer 1

您可以使用div[id*=stepbox]来检索divx数组，因为它们的ID都有stepbox个共同点。然后，您可以获取每个元素的索引，并在其余代码中使用它。（这是一个基于0的数组，这就是我在开头添加+1的原因。）

 $("div[id*=stepbox]").click(function(){
    int myIndex = $(this).index() + 1;
    $("#step" + myIndex).show();                    
    $("#stepswrapper section").not("#step" + myIndex).hide();
    $("#stepbox" + myIndex).addClass("stepboxactive");
    $("#stepboxmain div").not("#stepbox" + myIndex).removeClass("stepboxactive");
    myFunctions[functionName + myIndex]();
 });

Answer 2

如果您可以更新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>

然后，您的代码可以附加到具有类stepbox的任何div，并且它可以从data属性获取它的ID（您可以看到如何将此系统扩展为非顺序ID甚至是字母数字ID。您的代码可能如下所示：

$(".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]();
});

Answer 3

您应该使用闭包保持对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
}

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

3 个答案: