Javascript 在点击时获取索引

Question

我在 3d 艺术画廊中使用纯 Javascript。我有一个图像源数组，并通过从该数组中拉出来填充某些列。我需要在单击时获取图像的索引，以便我可以使用它从所述数组中提取更多信息...标题、说明。

我可以用 jQuery 做到这一点，但我正在尝试学习纯 Javascript。我已经在所有图像上都有事件监听器。这是当前代码:

var preview = document.getElementById('preview');
var subwrap = document.getElementById('subwrap');
var indexMatch;

for (var i=0; i <= imgList.length; i++){

    document.images[i].addEventListener("click", srcSend, false);

}

function srcSend(){

    var previewTitle = "Test Title";
    var previewText = "Test Description";
    var imgSrc = this.src;

    console.log('Image Source ='+''+imgSrc+'');

    if (imgSrc !== "file:///D:/Projects/mpaccione/img/navicon.png"){

    preview.className = " ";
    subwrap.className = "hide";
    preview.className = "show";
    preview.innerHTML = '<img src='+imgSrc+'><p id="title">'+previewTitle+'</p><p id="description">'+previewText+'</p>';   }}

Answer 1

您应该能够在图像集合上使用 Array.indexOf。

function srcSend(){

    var index = Array.prototype.indexOf.call(document.images, this);

}