Как получить номер текущего изображения, на который нажали в javascript

Question

Хорошо, предположим. У меня есть десять изображений в массиве documents.images. Когда я нажимаю на изображение. Как получить предупреждение о том, на какое изображение я нажал.

EDIT Причина, по которой мне нужен индекс изображения, на котором я щелкнул, заключается в том, что я пытаюсь привязать его к событию, а предыдущий способ не работает

document.images[i].addEventListener("click", function(){MakeMove(i)}, false);

Это утверждение находится в цикле for, и я намеревался связать его с каждым изображением, но, похоже, оно не работает.

Answer 1

Вот простой способ JavaScript сделать это:

window.onload = function() {
    for (var i = 0; i < document.images.length; i++) {
        var image = document.images[i];
        image.setAttribute("index", i + "");
        image.onclick = function() {
            var index = this.getAttribute("index");
            alert("This is image #" + index);
        };
    }
};

Хитрость заключается в том, чтобы назначить пользовательский атрибут с индексом, а затем прочитать этот атрибут.

Тестовый случай .

Answer 2

window.onload = function() {
    for (var i = 0; i < document.images.length; i++) {
        var image = document.images[i];
        image.onclick = function() {
            var images = Array.prototype.slice.call(document.images);
            alert(Array.indexOf(images,this));
        }
    };
};

JSFiddle: http://jsfiddle.net/kmendes/8LUzg/1/

Если вы хотите, чтобы он работал в старых браузерах, добавьте функцию в разделе Совместимость на https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/indexOf

Answer 3

Поместите это в конец HTML-файла, перед закрывающим тегом

<script type="text/javascript">
function listen(evnt, elem, func) {
    if (elem.addEventListener) { // W3C DOM
        elem.addEventListener(evnt,func,false);
    } else if (elem.attachEvent) { // IE DOM
        var r = elem.attachEvent("on"+evnt, func);
        return r;
    }
}


listen("click", document.getElementsByTagName("body")[0], function(event) {
     var images = document.images,
         clicked = event.target;
    for(var i =0, il = images.length; i<il;i++) {
        if(images[i] === clicked) {
            return alert("You clicked on the " + (i + 1) + "th image");
        }
    }

});
</script>