如何使用 jQuery 和 javascript 显示随机图像？答案

【问题标题】：How do i display a random image using jQuery and javascript?如何使用 jQuery 和 javascript 显示随机图像？
【发布时间】：2019-10-25 00:28:05
【问题描述】：

我正在使用引导程序和 jQuery。我有 4 张图片，我只想在每次有人点击按钮时随机显示一张。我尝试的是制作一个图像数组，然后使用按钮调用该函数，但它不起作用。知道我做错了什么吗？

这是按钮

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
            <button id="button" type="button" class="btn btn-primary">New Photo</button>
        </div>
    </div>
</div>

这是我想要显示图片的地方

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
            <img id="picture">
        </div>
    </div>
</div>

这是我的脚本

<script>
    $(document).ready(function() {
        $("#button").click(function() {
            displayPics();
        });
    });


    function displayPics() {

        var imagesArray = new Array();

        imagesArray = [
            "CM.jpg", "DC.jpg", "MG.jpg", "SW.jpg"
        ]

        var num = Math.floor(Math.random() * (imagesArray.length + 1));
        var img = imagesArray[num];

        $("picture").html("<img src='" + img + "' />")
    }

    window.onload = init;
</script>

【问题讨论】：

标签： javascript jquery html ajax

【解决方案1】：

您的代码需要两个修复。

修复 A：替换这个：

var num = Math.floor(Math.random() * (imagesArray.length + 1));

有了这个：

var num = Math.floor(Math.random() * imagesArray.length);

这是必需的，因为在原始代码中，随机数的范围是 0 到 4，而不是所需的 0 到 3。

修复 B：替换这个：

$("picture").html("<img src='" + img + "' />")

有了这个：

$("#picture").attr("src", img);

这是必需的，因为要通过 id 选择您需要添加一个#，并且您只需要更改src 属性，因此使用attr 是要走的路。

【讨论】：

【解决方案2】：

$("picture").html("<img src='" + img + "' />");
$("#picture").attr('src',img);

你丢失了 html 选择器。

【讨论】：