JavaScript将参数传递给按钮onclick函数

我试图通过循环创建一组按钮，并使用循环迭代器作为每个按钮onclick函数的参数

我的代码：

var testFnc = function(i) { alert("Arg: " + i); }

mainDiv.append(create_button(name, "buttonCSS", testFnc(i)));

但是，在加载页面和放置按钮时，会自动调用这些函数（即，我立即看到警报）

我相信这有一些共同的设计模式

---

谢谢

一种方法是为每个按钮调用一个“”函数，该函数创建一个单独的函数

mainDiv.append(create_button(name, "buttonCSS", (function(i) {

    // For the function below, i comes from
    // this function's scope, not the outside scope.

    return function() {
        testFnc(i);
    };

})(i) ));

这将允许您在功能之外更改

i

的值，并使现有按钮不受影响

---

（如果要创建大量按钮（可能有数千个），最好更改

create_button

函数，将属性添加到按钮元素本身，并让函数进行检查。或者，如果您的代码不需要在Internet Explorer 8或以下版本中工作，则可以使用代替上述代码。）一种方法是，为每个按钮调用一个“”函数，该函数创建一个单独的函数

mainDiv.append(create_button(name, "buttonCSS", (function(i) {

    // For the function below, i comes from
    // this function's scope, not the outside scope.

    return function() {
        testFnc(i);
    };

})(i) ));

这将允许您在功能之外更改

i

的值，并使现有按钮不受影响

---

（如果要创建大量按钮（可能有数千个），最好更改

create_button

函数，将属性添加到按钮元素本身，并让函数进行检查。或者，如果您的代码不需要在Internet Explorer 8或以下版本中工作，则可以使用代替上述代码。）

注意：有关这方面的详细说明，请参阅我的

通过使用括号，调用testFnc并将其返回值传递给

create_按钮

函数，因此它当然会立即发出警报。相反，您需要传入实际的函数对象而不调用它。通过在匿名函数ala

function（）{testFunc（i）；}

中包装

testFnc

来实现这一点。您能看到它是如何返回一个稍后而不是立即运行的函数的吗

这本身仍然不起作用，因为

i

参与了它周围的闭包，因此当click事件运行时，它使用最新的i值（它在循环结束时的值），而不是绑定时的值。若要解决此问题，请围绕仅位于回调的直接作用域中的不同变量创建一个新闭包，并且不高于该变量的值

i

，以便click事件具有绑定时的值，而不是绑定函数执行时的值

mainDiv.append(create_button(name, "buttonCSS", (function(i) {

    // For the function below, i comes from
    // this function's scope, not the outside scope.

    return function() {
        testFnc(i);
    };

})(i) ));

以下是如何做到这一点：

for (i = 0; i < len; i++) {
   mainDiv.append(
      create_button(name, "buttonCSS", (function(val) {
         return function() {
            testFnc(val);
         };
      }(i)))
   );
}

（i=0；i{ mainDiv.append( 创建按钮（名称，“按钮”和（功能（val）{ 返回函数（）{ testFnc（val）； }; }（i） ）） ); } 我确信这看起来有点混乱，但关键是在另一个函数中包装调用的函数（返回的函数）会创建一个新的作用域，其中包含一个变量

val

，该变量不在任何外部函数中使用。这使得闭包只覆盖立即值，将其与您想要的

i

分离。对此有更深刻的解释

---

请注意，本页上的另一个答案重复使用了

i

，这可能会令人困惑。这将起作用，但是不清楚内部函数的内部，它引用了

i

！我认为最好使用不同的变量名来避免混淆。

注意：有关这方面的详细说明，请参阅我的

通过使用括号，调用testFnc并将其返回值传递给

create_按钮

函数，因此它当然会立即发出警报。相反，您需要传入实际的函数对象而不调用它。通过在匿名函数ala

function（）{testFunc（i）；}

中包装

testFnc

来实现这一点。您能看到它是如何返回一个稍后而不是立即运行的函数的吗

这本身仍然不起作用，因为

i

参与了它周围的闭包，因此当click事件运行时，它使用最新的i值（它在循环结束时的值），而不是绑定时的值。若要解决此问题，请围绕仅位于回调的直接作用域中的不同变量创建一个新闭包，并且不高于该变量的值

i

，以便click事件具有绑定时的值，而不是绑定函数执行时的值

mainDiv.append(create_button(name, "buttonCSS", (function(i) {

    // For the function below, i comes from
    // this function's scope, not the outside scope.

    return function() {
        testFnc(i);
    };

})(i) ));

以下是如何做到这一点：

for (i = 0; i < len; i++) {
   mainDiv.append(
      create_button(name, "buttonCSS", (function(val) {
         return function() {
            testFnc(val);
         };
      }(i)))
   );
}

（i=0；i{ mainDiv.append( 创建按钮（名称，“按钮”和（功能（val）{ 返回函数（）{ testFnc（val）； }; }（i） ）） ); } 我确信这看起来有点混乱，但关键是在另一个函数中包装调用的函数（返回的函数）会创建一个新的作用域，其中包含一个变量

val

，该变量不在任何外部函数中使用。这使得闭包只覆盖立即值，将其与您想要的

i

分离。对此有更深刻的解释

---

请注意，本页上的另一个答案重复使用了

i

，这可能会令人困惑。这将起作用，但是不清楚内部函数的内部，它引用了

i

！我认为最好使用不同的变量名来避免混淆。

是否使用jQuery？您可以引用按钮的类

<button class='my-custom-class' data-index='0'>This button</button>

---

我建议使用自定义

data-*

属性，因为您可以使用jQuery中的

attr

属性访问自定义属性。这是实现它的一种方法。

您使用jQuery吗？您可以引用按钮的类

<button class='my-custom-class' data-index='0'>This button</button>

我建议使用自定义的

data-*

属性，因为可以使用jQuery中的

attr

属性访问