循环以检查数组中的最后一个图像

Loop to check last image in array

本文关键字：最后一个 图像 数组 检查 循环      更新时间：2023-09-26

感谢一位好心的成员，我找到了解决我的代码问题的方法！但我又在绕圈子了。。我试图在回答的问题中找到解决方案，但什么都不起作用。

我想要一个循环来检查是否加载了数组中的最后一个图像。我正在做一个简单的游戏，你点击一张图片，它就会变成下一张图片。目标是你必须在图像上点击多次，才能到达最后一张图像。如果你在最后一张照片上，你就赢了。如果你在最后一张照片上，需要有一个计时器在5秒后进行检查。（我有多张图片，你必须点击，我现在只显示一张）

所以我做了一个这样的for循环：

  for (eiImg == 'img/ei4.png'){
    alert("yay!");
}

这可能是非常非常错误的，但我是一个非常业余的程序员，所以我很抱歉！）当然没用。我甚至没有用定时器。。

有人能教我如何成功地进行循环，在5秒钟后检查图像是否是阵列中的最后一个图像吗。我试过用谷歌搜索，但就是找不到解决方案。

这是我的全部javascript代码：

var eieren = 0;
var eieren = Math.floor((Math.random() * 4) + 1);
var imgArray = [ 'img/ei1.png' , 'img/ei2.png' , 'img/ei3.png', 'img/ei4.png' ];

    imgArray.length;
    var eiImg = imgArray[eieren - 1];
    console.log( eiImg );
// thanks so much for the help Azzy Elvul!
    document.getElementsByTagName( 'img' )[0].src = eiImg;
    document.getElementsByTagName( 'img' )[0].addEventListener( "click", changeImage ());
    var counter = eieren - 1;
    function changeImage()
    {
        //Load new image if this is not the last image
        if ( counter < imgArray.length - 1 )
        {
            document.getElementsByTagName( 'img' )[0].src = imgArray[ ++counter % imgArray.length];
        }
    };

检查此项，它会创建数组中最后一个对象的警报

var imgArray = [ 'img/ei1.png' , 'img/ei2.png' , 'img/ei3.png', 'img/ei4.png' ];
var alertIndex = imgArray.length-1; // the last index from the array
for(var i = 0; i<imgArray.length; i++) {
    if(i == alertIndex) {
        alert(imgArray[i]);
    } 
}

JSFiddle-看看这个工作示例。

好吧，所以我对这个和你正在开发的解决方案很好奇，所以我自己尝试了一下，看看是否能让它发挥作用。我认为我的解决方案与您的方法略有不同。下面是带注释的代码，最后是代码的JSFiddle演示。

var imgArray = ['img/ei1.png', 'img/ei2.png', 'img/ei3.png', 'img/ei4.png'];
// get the body element and create an array to keep the image elements
var body = document.querySelector('body');
var imgs = [];
// loop over the list of images, creating new elements
// adding src attributes and click events to them, and then adding
// them to the imgs array we created
for (var i = 0, l = imgArray.length; i < l; i++) {
    var img = document.createElement('img');
    img.src = imgArray[i];
    img.addEventListener('click', changeImage);
    imgs.push(img);
}
function changeImage() {
    // are there any image elements left in the img array
    // if there are, continue
    if (imgs.length > 0) {
        // is the length of the img array less than the length
        // of the imgArray - if so, remove the previous image from the page 
        if (imgArray.length !== imgs.length) {
            body.removeChild(document.querySelector('img'));
        }
        // random number based on the number of image elements
        // remaining in the imgs array
        var random = Math.floor((Math.random() * imgs.length - 1) + 1);
        // add that image to the body element
        body.appendChild(imgs[random]);
        // remove the image element from the imgs array
        imgs.splice(random, 1);
    }
}
function checkOnLastImage() {
    // are you on the last image?
    if (imgs.length === 0) {
        console.log('congratulations')
    } else {
      console.log('try again');
    }
}
// run changeImage for the first time
changeImage();
// use a setTimeout to check at 5 seconds whether
// the last image has been reached
setTimeout(checkOnLastImage, 5000);

演示

为什么要迭代？直接获取最后一个对象。

alert(arr[arr.length-1])
相关文章：