在Javascript onClick事件中传递参数

我试图在onclick事件中传递一个参数。 以下是一个示例代码：

<div id="div"></div> <script language="javascript" type="text/javascript"> var div = document.getElementById('div'); for (var i = 0; i < 10; i++) { var link = document.createElement('a'); link.setAttribute('href', '#'); link.innerHTML = i + ''; link.onclick= function() { onClickLink(i+'');}; div.appendChild(link); div.appendChild(document.createElement('BR')); } function onClickLink(text) { alert('Link ' + text + ' clicked'); return false; } </script> 

然而，每当我点击任何链接警报总是显示“链接10点击”！

谁能告诉我我做错了什么？

谢谢

Answer 1

发生这种情况是因为我一旦调用函数就传播了范围。 您可以使用闭包来避免此问题。

 for (var i = 0; i < 10; i++) { var link = document.createElement('a'); link.setAttribute('href', '#'); link.innerHTML = i + ''; link.onclick = (function() { var currentI = i; return function() { onClickLink(currentI + ''); } })(); div.appendChild(link); div.appendChild(document.createElement('BR')); } 

或者如果你想要更简洁的语法，我build议你使用Nick Craver的解决scheme。

Answer 2

发生这种情况是因为它们都引用了相同的 ivariables，它正在改变每个循环，并在循环结束时保留为10 。 你可以使用这样的闭包来解决它：

 link.onclick = function(j) { return function() { onClickLink(j+''); }; }(i); 

你可以在这里试试

或者，把this作为你在处理程序中点击的链接，如下所示：

 link.onclick = function(j) { return function() { onClickLink.call(this, j); }; }(i); 

你可以在这里试试这个版本

Answer 3

 link.onclick = function() { onClickLink(i+''); }; 

是一个闭包，并存储对variablesi的引用，而不是创build函数时保存的值。 一个解决scheme是将for循环的内容包装在一个函数中：

 for (var i = 0; i < 10; i++) (function(i) { var link = document.createElement('a'); link.setAttribute('href', '#'); link.innerHTML = i + ''; link.onclick= function() { onClickLink(i+'');}; div.appendChild(link); div.appendChild(document.createElement('BR')); }(i)); 

Answer 4

尝试这个：

 <div id="div"></div> <script language="javascript" type="text/javascript"> var div = document.getElementById('div'); for (var i = 0; i < 10; i++) { var f = function() { var link = document.createElement('a'); var j = i; // this j is scoped to our anonymous function // while i is scoped outside the anonymous function, // getting incremented by the for loop link.setAttribute('href', '#'); link.innerHTML = j + ''; link.onclick= function() { onClickLink(j+'');}; div.appendChild(link); div.appendChild(document.createElement('br')); // lower case BR, please! }(); // call the function immediately } function onClickLink(text) { alert('Link ' + text + ' clicked'); return false; } </script> 

Answer 5

或者你可以使用这一行：

  link.setAttribute('onClick', 'onClickLink('+i+')'); 

而不是这个：

 link.onclick= function() { onClickLink(i+'');}; 

Answer 6

另一个简单的方法（可能不是最好的做法），但像魅力。 使用javascriptdynamic构build元素（超级链接或button）的HTML标记，并可以传递多个参数。

 // variable to hold the HTML Tags var ProductButtonsHTML =""; //Run your loop for (var i = 0; i < ProductsJson.length; i++){ // Build the <input> Tag with the required parameters for Onclick call. Use double quotes. ProductButtonsHTML += " <input type='button' value='" + ProductsJson[i].DisplayName + "' onclick = \"BuildCartById('" + ProductsJson[i].SKU+ "'," + ProductsJson[i].Id + ")\"></input> "; } // Add the Tags to the Div's innerHTML. document.getElementById("divProductsMenuStrip").innerHTML = ProductButtonsHTML; 

Answer 7

创build一个专门的函数来创build链接可能会更好，因此您可以避免创build两个匿名函数。 从而：

 <div id="div"></div> <script> function getLink(id) { var link = document.createElement('a'); link.setAttribute('href', '#'); link.innerHTML = id; link.onclick = function() { onClickLink(id); }; link.style.display = 'block'; return link; } var div = document.getElementById('div'); for (var i = 0; i < 10; i += 1) { div.appendChild(getLink(i.toString())); } </script> 

虽然在这两种情况下，你最终有两个函数，我只是觉得最好把它包装在一个语义上更容易理解的函数。

Answer 8

onclick vs addEventListener。 也许是一个偏好的问题（IE> 9）。

 // Using closures function onClickLink(e, index) { alert(index); return false; } var div = document.getElementById('div'); for (var i = 0; i < 10; i++) { var link = document.createElement('a'); link.setAttribute('href', '#'); link.innerHTML = i + ''; link.addEventListener('click', (function(e) { var index = i; return function(e) { return onClickLink(e, index); } })(), false); div.appendChild(link); div.appendChild(document.createElement('BR')); } 

如何使用简单的数据属性，而不是像封闭一样酷，但..

 function onClickLink(e) { alert(e.target.getAttribute('data-index')); return false; } var div = document.getElementById('div'); for (var i = 0; i < 10; i++) { var link = document.createElement('a'); link.setAttribute('href', '#'); link.setAttribute('data-index', i); link.innerHTML = i + ' Hello'; link.addEventListener('click', onClickLink, false); div.appendChild(link); div.appendChild(document.createElement('BR')); }