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

Question

感谢一位好心的会员，我找到了解决我的代码问题的方法！但是我再次陷入困境。我试图在已回答的问题中找到解决方案，但对我没有任何帮助..

我想要一个循环来检查是否加载了数组中的最后一张图像。我正在制作一个简单的游戏，您可以在其中单击一个图像，然后它会更改为下一个图像。目标是您必须多次单击图像才能到达最后一张图像。如果你在最后一张图片上，你就赢了。如果您在最后一张图片上，则需要有一个计时器在比方说 5 秒后进行检查。（我有多个图片你必须点击，打赌我现在只显示一个）

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

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

这可能是非常错误的，但我是一个非常业余的程序员，所以很抱歉！ ;) 当然，它没有用。而且我什至没有使用计时器..

谁能教我如何成功制作一个循环，在 5 秒后检查图像是否是数组中的最后一个图像。我试过 google 它，但我就是找不到解决方案。

这是我的全部 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];
        }
    };

Answer 1

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

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 - 看看这个工作示例。

Answer 2

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

alert(arr[arr.length-1])

Answer 3

好的，所以我对此以及您正在研究的解决方案很好奇，所以我自己尝试了一下，看看是否可以让它工作。我认为我的解决方案与您的方法略有不同。带注释的代码在下面，最后有代码的 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);

DEMO

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

Loop to check last image in array

javascript

arrays

random

image