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

您可以将索引发送到srcSend函数。

for (var i=0; i <= imgList.length; i++){
    document.images[i].addEventListener("click", function(){
        return (function(index) {
            srcSend(index);
        })(i);
    }, false);
}

Answer 2

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

function srcSend(){

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

}

Javascript在点击时获得索引

2 个答案: