Question

<div id="mydiv0"></div>
<div id="mydiv1"></div>
<div id="mydiv2"></div>


var myArray = [
  document.getElementById("mydiv0"),
  document.getElementById("mydiv1"),
  document.getElementById("mydiv2")
];

function myFunction(x){
  alert("my number is " + x);
}

for(var i = 0; i < myArray.length; i++){
  myArray[i].addEventListener("click", function(){myFunction(i);});
}

我想将事件侦听器附加到myArray中的每个元素。单击时，将显示一条警告消息，分别显示mydiv0，mydiv1和mydiv2的数字0、1和2。如上例所示，我尝试使用for循环，但是无论我单击哪个div，都会收到“我的号码为3”的消息。有没有办法将变量i的不同值作为myFunction的参数传递？

Answer 1

您可以使用let而不是var在循环中声明变量，而该变量创建块作用域局部变量。

var myArray = [
  document.getElementById("mydiv0"),
  document.getElementById("mydiv1"),
  document.getElementById("mydiv2")
];

function myFunction(x){
  alert("my number is " + x);
}

for(let i = 0; i < myArray.length; i++){
  myArray[i].addEventListener("click", function(){myFunction(i);});
}

<div id="mydiv0">Div 0</div>
<div id="mydiv1">Div 1</div>
<div id="mydiv2">Div 2</div>

Answer 2

您必须为点击回调创建隔离范围。

for(var i = 0; i < myArray.length; i++){
  (function(i){
    myArray[i].addEventListener("click", function(){myFunction(i);});
  })(i);
}

Answer 3

使用bind：

var myArray = [
  document.getElementById("mydiv0"),
  document.getElementById("mydiv1"),
  document.getElementById("mydiv2")
];

function myFunction(x){
  alert("my number is " + x);
}

for(var i = 0; i < myArray.length; i++){
  myArray[i].addEventListener("click", myFunction.bind(null, i));
}

div {
  height: 20px;
  width: 200px;
  border: 1px solid black;
}

<div id="mydiv0"></div>
<div id="mydiv1"></div>
<div id="mydiv2"></div>

Answer 4

或者，您可以按以下方式使用data属性。

<div id="mydiv0" data-value="1"></div>
<div id="mydiv1" data-value="2"></div>
<div id="mydiv2" data-value="3"></div>

for(var i = 0; i < myArray.length; i++){
    myArray[i].addEventListener("click",  function() {
        myFunction(this.getAttribute('data-value'));
    });
}

Answer 5

只需使用“ let”代替“ var”，如下所示：

@objc func playerItemBecameCurrent(notification:NSNotification){
    let playerItem:AVPlayerItem = notification.object as! AVPlayerItem
    let asset:AVURLAsset=playerItem.asset as! AVURLAsset
    let url = asset.url
    let path = url.absoluteString
    print(path)

}

'let'允许您声明变量，范围仅限于使用该变量的块，语句或表达式。这不同于'var'关键字，后者在全局范围内定义变量，或在整个函数中局部定义变量，而与块范围无关。

使用for循环并将事件侦听器添加到多个元素并传递不同的参数

5 个答案: