Question

好的，假设。我在documents.images数组中有十张图片。当我点击图像时。如何获得警报，告诉我我点击了什么图像。

修改我想要点击的图像索引的原因是因为我试图将它绑定到一个事件而前一种方式似乎不起作用

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);
        };
    }
};

技巧是使用索引分配自定义属性，然后读取该属性。

Live test case

Answer 2

将它放在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>

Answer 3

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

上的兼容性下添加功能

如何在javascript中获取当前图像的数量

3 个答案: