無法讀取未定義JSON的屬性'0'

我試圖製作一個圖像滑塊，每隔幾秒更改圖像'displayMain'。我的問題是，當我在setInterval中調用displayMain函數時，我不斷得到「無法讀取未定義的屬性0」錯誤。即使當我使用jsonData [i] .name的硬編碼值時，我也會收到同樣的錯誤。然而，該值在displayThumbs中傳遞得很好。有誰知道爲什麼我不能保留displayMain中的值，但可以在displayThumbs中這樣做？無法讀取未定義JSON的屬性'0'

window.addEventListener('load', function() { 
    var mainDiv = document.getElementById('main'); 
    var descDiv = document.getElementById('main-description'); 
    var gallery = document.querySelector('#main-img'); 
    var ul = document.querySelector('ul'); 
    var li; 
    var i = 0; 
    var displayThumbs; 
    var thumbName; 
    var current = 0; 
    var images = []; 

    function displayMain() { 
     var data = images[i]; 
     gallery.src = 'img/' + data[0]; 
     descDiv.innerHTML = '<h2>' + data[1] + '</h2>'; 
    } 

    function displayThumbs() { 
     for (i = 0; i < images.length; i += 1) { 
      var data = jsonData[i].name.replace('.jpg', '_thumb.jpg'); 
      // thumbnails use dom to make img tag 
      li = document.createElement('li'); 
      thumbs[i] = document.createElement('img'); 
      var createThumbNail = thumbs[i].src = 'img/' + data; 
      thumbs[i].setAttribute('alt', data); 
      thumbs[i].addEventListener('click', function() { 
       alert(createThumbNail); 
      }); 
      ul.appendChild(thumbs[i]); 
     } 
    } 

    // success handler should be called 
    var getImages = function() { 
     // create the XHR object 
     xhr = new XMLHttpRequest(); 
     // prepare the request 
     xhr.addEventListener('readystatechange', function() { 
      if (xhr.readyState === 4 && xhr.status == 200) { 
       // good request ... 
       jsonData = JSON.parse(xhr.responseText); 
       for (var i = 0; i < jsonData.length; i += 1) { 
        var data = []; 
        data.push(jsonData[i].name); 
        data.push(jsonData[i].description); 
        images.push(data); 
       } 

       displayMain(); 
       displayThumbs(); 
       setInterval(displayMain, 1000); 
      } 
      else { 
       // error 
      }  
     }); 

     xhr.open('GET', 'data/imagedata.json', true); 
     xhr.send(null);  
    }; 

    // setInterval(getImages, 2000); 
    getImages(); 
    // displayThumbs(); 
});

來源

2013-11-22 Suz

什麼是'setInterval（displayMain，1000）'應該在做什麼？除非圖像本身在服務器上發生變化，否則這絕對不會做任何事情。另外，你有沒有試過在調試器中執行並在for循環運行後檢查'images'的值？ – tjameson

我想讓setInterval轉到下一張圖片，但如果我無法在displayMain函數中保留jSonData [i] .name值，我不能這樣做。 – Suz

你的問題是，你的displayMain使用任何值i在當時，和i永遠不會增加，所以它會等於後以images.length for循環displayThumbs。 displayThumbs自身增加，所以你不會超越數組的末尾。

在你的評論中，你提到你想循環瀏覽圖片。這應該會好一點：

function displayMain() { 
    var data; 

    // wrap around to the first image 
    if (i >= images.length) { 
     i = 0; 
    } 

    data = images[i]; 
    gallery.src = 'img/' + data[0]; 
    descDiv.innerHTML = '<h2>' + data[1] + '</h2>'; 
    i++; 
}

就個人而言，我會用一個私人i，以防萬一另一個函數重複使用相同的變量：

function displayMain() { 
    var data; 

    // wrap around to the first image 
    if (displayMain.i >= images.length || isNaN(displayMain.i)) { 
     displayMain.i = 0; 
    } 

    data = images[displayMain.i]; 
    gallery.src = 'img/' + data[0]; 
    descDiv.innerHTML = '<h2>' + data[1] + '</h2>'; 

    // move to the next image 
    displayMain.i++; 
}

這附加一個名爲i的功能displayMain變量。它會在每次調用時更新這個變量，並且沒有其他函數會使用相同的i變量。

來源

2013-11-22 19:28:19 tjameson

非常感謝！它完美的工作！ – Suz

無法讀取未定義JSON的屬性'0'

回答

相關問題