如何在函数中使用动态变量而不将其链接到变化的​​变量

Question

对不起标题，但我不确定这个问题的正确术语是什么。我试图在JavaScript中使用for循环动态生成可点击元素的表。单击时，每个元素应触发相同的功能，但具有不同的参数。在我的代码中，我正在设置onClick函数：

elementArray[i].onClick = function() { clickFunction(i) };

然而，当我这样做时，clickFunction只是取了当前设置的i值，而不是我设置onClick函数时的值，这就是我想要的。有什么想法吗？

Answer 1

当我得到你的问题时，你想要一个具有可点击元素的表，使用diff param调用相同的函数。 [让我知道这不是你的问题]

所以拿i（索引或行号）将是该函数的参数。

HTML：

<table id='myTable'></table>

Javascript：

for(i = 9; i >= 0; i--) {
var table = document.getElementById("myTable");

// Create an empty <tr> element and add it to the 1st position of the table:
var row = table.insertRow(0);

// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell = row.insertCell(0);

// Add some text to the new cells:
cell.innerHTML = "<input type='button' onclick='callIt("+i+")'";
}
function callIt(index) {
alert(index);
}

我在考虑您想要点击按钮。 希望它会对你有所帮助。

您可以获得更多w3schools

Answer 2

这是@Bhojendra尼泊尔版本的“重复问题”适用于您的问题。使用此HTML：

<div class="element-0">0</div>
<div class="element-1">1</div>
<div class="element-2">2</div>

这个脚本：

var elementArray = [];
var creatFunc = function($this,i){
  return function() { 
    console.log(i);
    $this.html(i + 1);
    if (i>1) i++;
  };
};

for (var i = 0; i < 3; i++) {
  elementArray[i] = $('.element-' + i);
  elementArray[i].click( creatFunc( elementArray[i] , i) );
}

通过在单独的函数中创建函数，我们已经隔离了变量。我添加了“if（i＆gt; 1）i ++;”显示新函数如何保持自己的变量并可以递增它（继续点击第三个div以查看数字不断增加）。

这是一个jsfiddle：

https://jsfiddle.net/mckinleymedia/1cksb8ky/

我希望这会有所帮助。

哦，我在这里添加了jQuery。我不肯定如何在手边使用vanilla javascript。