Question

感谢一位善意的成员，我找到了解决我的代码问题的方法！但是我又在循环中再次奋斗..我试着在回答的问题中找到解决方案，但没有什么对我有用..

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

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

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

这可能非常非常错，但我是一个非常业余的程序员，所以我很抱歉！ ;）当然，它不起作用。我甚至没有使用计时器..

如果Image是阵列中的最后一个图像，有人可以教我如何成功制作一个在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];
        }
    };

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

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

3 个答案: