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

我想知道是否有人可以提供有关如何解决获取事件索引问题的信息。我怀疑封锁可能是解决方案的一部分，但会感谢一些见解。从动态元素列表中获取选择器事件索引

首先我动态构建HTML5视频容器，例如该建立与调用PHP脚本，通过循环，并建立这个取决于我有多少视频要在弹出模态的AJAX程序：

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

我希望这是有道理的。

感谢

来源

2016-12-01 TrueBlue

请将PHP更改为HTML并使用“<>”片段编辑器 – mplungjan

在这里你有一个演示，所以你可以看到每个函数知道哪些指标有其自身

通知的第一个例子保留了预期指标，而反例获取最后的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(); 
 
}

来源

2016-12-01 13:59:25 arhak

Thankyou创建[mcve]。这是一个非常聪明的解决方案。我现在正在实施它，并且一旦证明会接受。 – TrueBlue

我实现了你给出的第一个例子，它完美地工作。谢谢。 – TrueBlue

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

回答

相关问题