如何制作一个图像 url 数组，将它们附加到现有数组，并让页面使用 jQuery 加载图像？

Question

我正在尝试将图像添加到我的随机数组中。基本上这个想法是这个随机生成器告诉你你应该看什么电影，我想弄清楚如何在标题下面添加动作图像。我认为最好的方法可能是使用图像 url 创建第二个数组，并使用 + 和括号将它们附加到现有数组。我只是不确定如何让脚本加载图像。这是我的代码笔：https://codepen.io/McComb/pen/qVPOQO

HTML

<head>  
<link 
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" 
rel="stylesheet"  type='text/css'>  
<h1 style="text-align: center; color: red; font-family: verdana; font-
weight: bold;">WHAT CHRISTMAS MOVIE SHOULD I WATCH?</h1>
</head>
<body>
<div class="container">
<div id="generator" style="padding-top: 10px;">
<p>
<i class="fa fa-snowflake-o fa-5x spin"></i>
<i class="fa fa-gift fa-5x spin"></i>
<i class="fa fa-tree fa-5x spin"></i>

</p>

<input type="button" id="btnSearch" value="What Christmas Movie Should I 
Watch?" onclick="GetValue();" />
<p id="message"></p>
</div>
<div id="picture"></div>
</div>

JQuery

 function GetValue()
{
var myarray= new Array("The Santa Claus", "Just Friends","Home Alone", "Home 
Alone 2","Serendipity","Love Actually","Elf","Christmas Vacation","A 
Christmas Story","The Grinch","Jingle All the Way","Rudolph the Red-Nosed 
Reindeer","Ernest Saves Christmas","Frosty the Snowman","The Muppet 
Christmas Carol","The Nightmare Before Christmas","Jesus of Nazareth 
1977","Bad Santa");
var random = myarray[Math.floor(Math.random() * myarray.length)];
//alert(random);
document.getElementById("message").innerHTML=random;
}

Answer 1

实现您想要的效果的最简单方法是保存 objects 而不是数组中的字符串。这样，您可以创建具有 title 字段和 imageUrl 字段的 objects，如下所示：

var myarray= new Array(
    {
        title: "The Santa Claus",
        imageUrl: "https://upload.wikimedia.org/wikipedia/en/thumb/e/e7/Video-x-generic.svg/90px-Video-x-generic.svg.png"
    }, 
    {
        title: "Random Movie",
        imageUrl: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/BolexH16.jpg/220px-BolexH16.jpg"
    }, 
    // you can add as many comma-separated objects as you want
);

向您的 HTML 添加一个 img 元素并为其指定 ID picture。在您的 JS 中，您可以像这样设置电影的标题和图像：

document.getElementById("message").innerHTML=random.title;

// the element with id picture is an image element
document.getElementById("picture").src = random.imageUrl;

我已经根据建议的更改修改了您的代码笔 here。

如何制作一个图像 url 数组，将它们附加到现有数组，并让页面使用 jQuery 加载图像？

How can I make an array of image urls, append them to an existing array, and get the page to load the image using jQuery?

html

javascript

css

jquery

codepen