Question

我想知道是否有人能够深入了解如何解决获取事件索引的问题。我怀疑闭包可能是解决方案的一部分，但我会欣赏一些见解。

首先我动态构建一个HTML5视频容器，例如，这构建了一个ajax例程，该例程调用一个php脚本循环并根据我想要的弹出模式中的视频构建它：

    <div id="ids_<?php echo $i+1;?>"  >
        <h5><?php echo $route_title;?></h5>
        <video id ="myPlayer_<?php echo $i+1;?>"  
           width="100%" poster="videos/posters/<?php echo $poster_name;?>" 
           controls data-info ='<?php echo $jsonData;?>' >
           <source src="videos/<?php echo $video_name;?>" type="video/mp4">
            Your browser does not support HTML5 video.
        </video>
    </div>

您可以看到关键元素是视频id=myPlayer_1, myPlayer_2 etc。我现在使用以下代码片段创建包含其中所有视频元素的模态框。（'data_val[0]'保存上面显示的php生成的代码。）

    $(".modal-boxes").append('<div id="dialog_1" title="Most popular videos">'+data_val[0]+'</div>');
    var numItems = $('.modal-boxes').length;
    var hsize = numItems*320;
    if (hsize > 600) hsize = 600;
    $("#dialog_1").dialog({ width: 250, height: hsize, dialogClass: 'no-     close video-dialog'});
    var popUpPlayer =[];
    for (var i= 1; i <= numItems; i++ ){
        popUpPlayer[i] = document.getElementById("myPlayer_"+ i); 
    }

在HTML模式框中声明为：

<div class="modal-boxes"> </div>

我现在可以通过以下方式使用这些对象。里面的代码是常见的，但不是必须的。例如：

    popUpPlayer[index].onplay = function() {
        'do something in here once the user clicks the play button'
    }

现在的问题是，当用户点击说第三个视频时，javascript知道应用哪个索引，这可能是索引= 3？

我希望这是有道理的。

由于

Answer 1

这里有一个演示，所以你可以看到每个函数都知道哪个索引是自己的

注意第一个示例保留了预期的索引，而counter-examples获取i1的最后一个值7

var numItems = 6;
var popUpPlayer = [];

//// callbacks know what was their index at the time the closure took place ////

for (var i3 = 1; i3 <= numItems; i3++) {
  popUpPlayer[i3] = {}; // dummy object to mimic
  popUpPlayer[i3].onplay = myNewCallback(i3);
}

function myNewCallback(index) {
  return function() {
    console.log('callback says: ' + index);
  };
}

for (var i4 = 1; i4 <= numItems; i4++) {
  popUpPlayer[i4].onplay();
}

//// counter-example below, will always print 7 ////

for (var i1 = 1; i1 <= numItems; i1++) {
  popUpPlayer[i1] = {}; // dummy object to mimic
  popUpPlayer[i1].onplay = function() {
    console.log('onplay says: ' + i1);
  };
}

for (var i2 = 1; i2 <= numItems; i2++) {
  popUpPlayer[i2].onplay();
}

从动态元素列表中获取选择器事件索引

1 个答案: