Question

编辑：找到错误并修复它，而不是colors.length，它应该是theImages.length。感谢那些帮助过的人。

我遇到了一个阵列的问题我每次刷新页面时都会使用一段时间来按顺序更改我博客上的某些图像。例如，当您刷新我的页面时，图像1A，1B和1C变为2A，2B和2C，依此类推。在使用这个阵列为我的博客制作了大约4个不同的主题之后几乎没有问题，我制作了一个涉及6个不同图像的主题，这比我通常使用的更多。图像只有一个备用集，因此当您刷新它时，它们会在集之间来回传递。但是，图片在刷新时已停止更改，并且当我的主题应该在刷新时更改时，我仍然坚持this。有没有人知道如何解决它？我附上了我用过的代码，如果有人可以提供帮助，我会非常感激。

<script type="text/javascript">

            function refreshSequence() {

            //get current cookie value
            var currentIndex = parseInt(getCookie());

            //get image object
            var myImg = document.getElementById('SidebarIcon');

            //declare image directory path and image array
            var thePath = "https://";
            var theImages = ["31.media.tumblr.com/99731e8e83fb073cf39c9384137d9c1f/tumblr_inline_nesxwvNhwO1ql0f75.png", "31.media.tumblr.com/eb31394be711bc9acaae672d81dc979d/tumblr_inline_nesxx2Ay3R1ql0f75.png"]

            var imgPath = thePath + theImages[currentIndex];
            myImg.src = imgPath;

            //get image object
            var myImg = document.getElementById('SidebarPixel');

            //declare image directory path and image array
            var thePath = "https://";
            var theImages = ["31.media.tumblr.com/3c74b0cddf6eea3b464d2d1a7f34e597/tumblr_inline_nesxwgSnSv1ql0f75.png", "31.media.tumblr.com/de88145e72ccb2987d323f4ff8a607d8/tumblr_inline_nesxl0LzRO1ql0f75.png"]

            var imgPath = thePath + theImages[currentIndex];
            myImg.src = imgPath;

             //get image object
            var myImg = document.getElementById('SidebarGIF');

            //declare image directory path and image array
            var thePath = "http://";
            var theImages = ["static.tumblr.com/v2omgmu/bNEnejyu1/terrabg.gif", "static.tumblr.com/v2omgmu/SoXner1tt/terrabg2.gif"]

            var imgPath = thePath + theImages[currentIndex];
            myImg.src = imgPath;

            //get image object
            var myImg = document.getElementById('SidebarBG');

            //declare image directory path and image array
            var thePath = "http://";
            var theImages = ["static.tumblr.com/v2omgmu/LKZnelu4o/background.png", "http://static.tumblr.com/v2omgmu/1DTnesy9e/backgroundthang.png"]

            var imgPath = thePath + theImages[currentIndex];
            myImg.src = imgPath;

            //get image object
            var myImg = document.getElementById('NavIcon');

            //declare image directory path and image array
            var thePath = "https://";
            var theImages = ["31.media.tumblr.com/7b5bc574d9d829df1091687ed4fda3af/tumblr_inline_nesxxnEn5S1ql0f75.png", "31.media.tumblr.com/c083dc983293f5f37d5f827c636ca93f/tumblr_inline_nesxxyNUWz1ql0f75.png"]

            var imgPath = thePath + theImages[currentIndex];
            myImg.src = imgPath;

            //get image object
            var myImg = document.getElementById('SideThing');

            //declare image directory path and image array
            var thePath = "http://";
            var theImages = ["static.tumblr.com/v2omgmu/bgOnesvtn/terrasidething1.png", "static.tumblr.com/v2omgmu/y9nnesvuq/terrasidething2.png"]

            var imgPath = thePath + theImages[currentIndex];
            myImg.src = imgPath;

            //set next cookie index
            currentIndex += 1;
            currentIndex %= colors.length;
            setCookie(currentIndex);
        }

        function setCookie(someint) {
            var now = new Date();
            var addDays = now.getDate() + 7
            now.setDate(addDays); // cookie expires in 7 days
            var theString = 'imgID=' + escape(someint) + ';expires=' + now.toUTCString();
            document.cookie = theString;
        }

        function getCookie() {
            var output = "0";
            if(document.cookie.length > 0) {
                var temp = unescape(document.cookie);
                temp = temp.split(';');
                for(var i = 0; i < temp.length; i++) {
                    if(temp[i].indexOf('imgID') != -1) {
                        temp = temp[i].split('=');
                        output = temp.pop();
                        break;
                    }
                }
            }
            return output;
        }

</script>

<body onload="refreshSequence();">

<img id="SidebarIcon">
<img id="SidebarGIF"> etc etc

Answer 1

您已多次声明以下变量。

var myImg = document.getElementById('NavIcon');
var thePath = "https://";
var theImages = []
var imgPath = thePath

因此将使用最后一个声明。所以你不会看到页面刷新。相反，您将始终获得您最后声明的图像。

您需要重命名变量/更改逻辑。

重命名变量，如下所示，应该可以正常工作。

var myImgNavIcon = document.getElementById('NavIcon');
var thePathNavIcon = "https://";
var theImagesNavIcon = []
var imgPathNavIcon = thePath 

var myImgSidebarIcon = document.getElementById('SidebarIcon');
var thePathSidebarIcon = "https://";
var theImagesSidebarIcon = []
var imgPathSidebarIcon = thePath

编辑：重新考虑您的代码以获得更好的可重用性。

function setImage(elementId, theImages, currentIndex){
    //get image object
    var myImg = document.getElementById(elementId);

    //declare image directory path and image array
    var thePath = "https://";

    var imgPath = thePath + theImages[currentIndex];
    myImg.src = imgPath;
}

function refreshSequence() {
    //get current cookie value
    var currentIndex = parseInt(getCookie());

    var sideBarImages = ["31.media.tumblr.com/99731e8e83fb073cf39c9384137d9c1f/tumblr_inline_nesxwvNhwO1ql0f75.png", "31.media.tumblr.com/eb31394be711bc9acaae672d81dc979d/tumblr_inline_nesxx2Ay3R1ql0f75.png"]

    var sidebarPixelImages = ["31.media.tumblr.com/3c74b0cddf6eea3b464d2d1a7f34e597/tumblr_inline_nesxwgSnSv1ql0f75.png", "31.media.tumblr.com/de88145e72ccb2987d323f4ff8a607d8/tumblr_inline_nesxl0LzRO1ql0f75.png"]

    var sidebarGIFImages = ["static.tumblr.com/v2omgmu/bNEnejyu1/terrabg.gif", "static.tumblr.com/v2omgmu/SoXner1tt/terrabg2.gif"]

    var sidebarBGImages = ["static.tumblr.com/v2omgmu/LKZnelu4o/background.png", "http://static.tumblr.com/v2omgmu/1DTnesy9e/backgroundthang.png"]

    setImage('SidebarIcon', sideBarImages, currentIndex);
    setImage('SidebarPixel', sidebarPixelImages, currentIndex);
    setImage('SidebarGIF', sidebarGIFImages, currentIndex);
    setImage('SidebarBG', sidebarBGImages, currentIndex);            

    document.body.style.backgroundColor = background;

    //set next cookie index
    currentIndex += 1;
    currentIndex %= colors.length;
    setCookie(currentIndex);
}

我还没有测试过我的代码。我这样做只是为了给你一个想法。

Answer 2

Chrome开发者工具显示您拥有以下内容：

document.body.style.backgroundColor = background;

并且您没有定义变量background，因此代码会中断。你删除这条线。对于cookie操作，最好使用MDN的library。

刷新时的图像序列更改

2 个答案: