在 Javascript onClick 事件中传递参数

Question

我试图在 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

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

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'));
}

或者，如果您想要更简洁的语法，我建议您使用 Nick Craver 的解决方案。

Answer 2

发生这种情况是因为它们都引用了相同的i变量，该变量在每个循环中都发生了变化，并在循环结束时保留为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+''); };

是一个闭包并存储对变量i的引用，而不是创建函数时i持有的值。 一种解决方案是将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

另一种简单的方法（可能不是最佳实践）但效果很好。 使用 javascript 动态构建元素（超链接或按钮）的 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 5

最好创建一个专用函数来创建链接，这样您就可以避免创建两个匿名函数。 因此：

<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 6

onclick 与 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'));
}

仅仅使用一个普通的 data-* 属性是多么接近，不像闭包那么酷，但是..

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'));
}

Answer 7

尝试这个：

<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 8

或者你可以使用这一行：

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

而不是这个：

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

Answer 9

这将适用于 JS 而不耦合到 HTML：

document.getElementById("click-button").onclick = onClickFunction;

function onClickFunction()
{
    return functionWithArguments('You clicked the button!');
}

function functionWithArguments(text) {
    document.getElementById("some-div").innerText = text;
}