循環檢查數組中的最後一個圖像

感謝一位友善的成員，我找到了我的代碼問題的解決方案！但我再次與循環鬥爭..我試圖找到答案的解決方案，但沒有爲我工作..循環檢查數組中的最後一個圖像

我想循環檢查數組中的最後一個圖像是否加載。我正在製作一個簡單的遊戲，您可以點擊一張圖片，然後更改爲下一張圖片。目標是您必須多次點擊圖片才能看到最後一張圖片。如果你在最後一張圖片上，你就贏了。如果你在最後一張圖片上，那麼需要有一個計時器，讓我們說5秒後進行檢查。（我有，你必須點擊多張圖片，打賭我展示只是一個現在）

所以我做了一個像這樣的循環：

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

來源

2015-04-07 Eva Reussien

如果你想檢查圖像爲5秒後，最後一個圖像，你可以使用的setTimeout的JavaScript的方法。你可以用數組[array.length-1]得到最後一個元素 – suman

OK，所以我很好奇這一點，有關解決方案的您正在使用的，所以我不得不在一搏自己只是爲了看看，如果我能得到它的工作。我認爲我的解決方案與您的方法略有不同。註釋的代碼如下，最後有一個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

來源

2015-04-07 11:48:02 Andy

感謝您的幫助安迪！它現在終於開始工作了，謝謝！ –

檢查這一點，它從數組

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創建的最後一個對象的警報 - 看看這個工作的例子。

來源

2015-04-07 10:58:13 Or9400

感謝您的幫助！ –

爲什麼要迭代？直接獲取最後一個對象。

alert(arr[arr.length-1])

來源

2015-04-07 11:02:01

循環檢查數組中的最後一個圖像

回答

相關問題