未正确发送函数参数[重复]

Question

我有以下功能：

function showPoster(element,list_nr) 
{ 
    var image ="url('../Login/" + movie_image[list_nr] + "'), auto";
    element.style.cursor = image;
}

function putNewContent(page)
{
    for(var i = 1; i <= 10; i++)
    { 
        document.getElementById("p"+i+1).onmouseover = function() { showPoster(this,(page-1)*10+i); }
    }
} 

问题是，例如，当我运行 putNewContent(1) 时，它会调用函数 showPoster() 10 次，但到达的参数showPoster() 总是 11 (i

Answer 1

问题在于您的索引 (i) 是在函数外部声明的，而不是每个实例私有的。所有函数最终都使用最后一个，在你的例子中是 10。

这可以通过.bind()解决

function putNewContent(page) {
  for (var i = 1; i <= 10; i++) {
    document.getElementById("p" + i + 1).onmouseover = function(i) {
      showPoster(this, (page - 1) * 10 + i);
    }.bind(null,i)
  }
}

或闭包

function putNewContent(page) {
  for (var i = 1; i <= 10; i++) {
    document.getElementById("p" + i + 1).onmouseover = (function(i) {
        return function() {
          showPoster(this, (page - 1) * 10 + i);
        }
      }
    })(i);
}

两者都会为每个函数保留一个 i 的私有实例。