js/jquery;未定义，执行顺序

js/jquery; Undefined, Order of execution?

本文关键字：执行 顺序 未定义 jquery js      更新时间：2023-09-26

我一直在尝试使用一些图像创建一个随机的无重复。

有时，我的参数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>

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

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

对此：

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

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

我几乎可以肯定问题是您在第 25 行的拼写错误。尝试更改

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

自

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

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

相关文章：