Question

我一直试图使用一些图像创建随机不重复。

有时我的参数getRandomImage会抛出undefined条消息;发生的事情是数字变得比数组长度大。（虽然我以为我一直都是明确的长度）

我认为这种情况正在发生，因为我的所有代码几乎同时执行/我的处理顺序不正确？

任何帮助都会很棒我已经上传了我告诉我的内容，如果还不够的话。

var imageContainer = new Array;
imageContainer[0] = "url(images/cake1.jpg)";
imageContainer[1] = "url(images/cake2.jpg)";
imageContainer[2] = "url(images/cake4.jpg)";
imageContainer[3] = "url(images/joke1.jpg)";
imageContainer[4] = "url(images/joke2.jpg)";
imageContainer[5] = "url(images/joke3.jpg)";
imageContainer[6] = "url(images/joke4.jpg)";
imageContainer[7] = "url(images/joke5.jpg)";
imageContainer[8] = "url(images/penguin1.jpg)";
imageContainer[9] = "url(images/penguin3.jpg)";
imageContainer[10] = "url(images/penguin4.jpg)";

var emptyContainer = [0];

function changeImage(getRandomImage) {

    getRandomImage = Math.floor(Math.random() * imageContainer.length);

    $("#imgdiv").css("background-image", imageContainer[getRandomImage]);
    imageContainer.splice(getRandomImage, 1);
    emptyContainer.splice(getRandomImage, 0, imageContainer[getRandomImage]);

    if (getRandomImage < imageContainer.length) {
        getRandomImage == 0;
    }

    if (imageContainer.length == 0) {
        console.log("image container is empty" + " " + "showing images" + imageContainer);
        return;
    }

    console.log("you're current image is..." + imageContainer[getRandomImage]);
    console.log("you rolled a..." + getRandomImage);

    console.log(imageContainer);
    return;
}


$(document).ready(function() {
    changeImage();
    $("#mainButton").click(function() {
        changeImage();
    });
})

<style type="text/css">
    body {
        margin: 0 auto;
    }
    #backgroundContainer {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #ebf1f6;
        background: linear-gradient(to bottom, #ebf1f6 0%, #abd3ee 27%, #abd3ee 27%, #89c3eb 63%, #89c3eb 63%, #d5ebfb 100%);
    }
    #mainContainer {
        position: absolute;
        left: 225px;
        width: 75%;
        height: 100%;
        margin: 0 auto;
        background: url("images/ylw-paper.png");
        background-size: 100%;
    }
    #mainButton {} #quotes {} #imgdiv {
        width: 400px;
        height: 550px;
        background-color: none;
        outline: none;
        position: relative;
        margin: 100px 900px;
    }
</style>

<html>
    <head>
        <title>Jquery Examples</title>

        <meta charset="utf-8" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>

    <body>
        <div id="backgroundContainer">
            <div id="mainContainer">
                <button id="mainButton" img src="mainButton">Need Love</button>
                <img id="imgdiv" img src=""></img>
                <div id="quoteBox">
                    <p id="quotes">test</p>
                </div>
            </div>
        </div>
</html>

Answer 1

对于初学者，您需要从这两个语句中反转这两个语句：

  imageContainer.splice(getRandomImage, 1);
  emptyContainer.splice(getRandomImage, 0, imageContainer[getRandomImage]);

到此：

  emptyContainer.splice(getRandomImage, 0, imageContainer[getRandomImage]);
  imageContainer.splice(getRandomImage, 1);

在您的版本中，您将从阵列中删除所选图像，然后在删除它之后，您正尝试访问它。

Answer 2

我几乎可以肯定问题是你在25号线上的拼写错误。尝试更改

if (getRandomImage < imageContainer.length) {
    getRandomImage == 0;

}

要

if (getRandomImage < imageContainer.length) {
    getRandomImage = 0;

}

Answer 3

当你拼接imagecontainer数组时，它会导致它的长度减少，也许当你引用一个不再存在的索引时。

JS / jquery的;未定义，执行顺序？

3 个答案: