Question

我正在尝试制作一个图像滑块，每隔几秒就会改变图像'displayMain'。我的问题是，当我在setInterval中调用displayMain函数时，我不断得到'无法读取属性0的未定义'错误。即使我使用jsonData [i] .name的硬编码值，我也会收到同样的错误。然而，这个值在displayThumbs中传递得很好。有谁知道为什么我不能保留displayMain中的值，但可以在displayThumbs中这样做？

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();
});

Answer 1

你的问题是你的displayMain使用的是i当时的值，而i永远不会增加，所以它会等于for循环后的images.length在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变量。

无法读取未定义JSON的属性“0”

1 个答案: