如何在Javascript中将文本与图像相关联？答案

【问题标题】：How to associate an text to image in Javascript?如何在Javascript中将文本与图像相关联？
【发布时间】：2017-07-30 16:31:58
【问题描述】：

我有一个简单的问题要在这里问。我在这里创建了一个有效的随机生成器：

var randPics = document.querySelector("#randPics");
var getPics = document.querySelector(".getPics");


getPics.addEventListener("click", function(){ 
//array to store images for the random image generator
var picsGallery = new Array();
    picsGallery = ["https://static2.jetpens.com/images/a/000/026/26648.jpg?mark64=aHR0cDovL3d3dy5qZXRwZW5zLmNvbS9pbWFnZXMvYXNzZXRzL3dhdGVybWFyay5wbmc&markalign64=dG9wLHJpZ2h0&markscale=19&s=938428f6eca690069a86f66d0754444b",
"http://assets.sajiansedap.com/media/article_image/cover/large/25505-cara-memilih-nanas-yang-matang.jpg",
 "https://cdn.shopify.com/s/files/1/1030/8703/products/epal-hijau-green-apple-each-sebiji_1024x1024.jpg?v=1487817043"]
 
 //generate random no to select the random images
var rnd = Math.floor(Math.random() * picsGallery.length);
//change the pics locations of the source
  randPics.src=picsGallery[rnd]
  });

#randPics{
	width: 300px;
	height: 300px;
	align-content: center;
}

<body>
<p>Display a random image each time the buttons is clicked!</p>
<p> You get a <span id="text"></span>  </p>

<button class="getPics"> Click ! </button>
<br>
<img id="randPics" src="https://d30y9cdsu7xlg0.cloudfront.net/png/45447-200.png">

</body>

当用户点击按钮时，图片源会随机选择数组中的一张图片。但是，我有一点问题。如何将文本与图像相关联？例如，如果用户点击按钮，他得到了笔的图像，文本

你得到一个

应该改为

你会得到一支笔。

感谢您的帮助！

【问题讨论】：

标签： javascript html css random

【解决方案1】：

首先，您需要将文本存储在某处，然后您必须有一种方法将文本与图像关联起来，为此您可以将与图像关联的文本存储在一个对象中，然后拥有一个此类对象的数组，而不仅仅是一组图像 url。此外，您无需在事件处理函数内声明数组，您可以定义一次，然后在函数内使用它，因为它将在范围内。像这样：

var randPics = document.querySelector("#randPics");
var getPics = document.querySelector(".getPics");
var textElem = document.querySelector("#text");

//array to store images for the random image generator
var picsGallery = picsGallery = [{img: "https://static2.jetpens.com/images/a/000/026/26648.jpg?mark64=aHR0cDovL3d3dy5qZXRwZW5zLmNvbS9pbWFnZXMvYXNzZXRzL3dhdGVybWFyay5wbmc&markalign64=dG9wLHJpZ2h0&markscale=19&s=938428f6eca690069a86f66d0754444b", text:'pen'},
{img: "http://assets.sajiansedap.com/media/article_image/cover/large/25505-cara-memilih-nanas-yang-matang.jpg", text:'pineapple'},
 {img: "https://cdn.shopify.com/s/files/1/1030/8703/products/epal-hijau-green-apple-each-sebiji_1024x1024.jpg?v=1487817043", text:'apple'}];

getPics.addEventListener("click", function(){ 
   
 //generate random no to select the random images
var rnd = Math.floor(Math.random() * picsGallery.length);
//change the pics locations of the source
  randPics.src=picsGallery[rnd].img;
  text.innerHTML = picsGallery[rnd].text;
  });

#randPics{
	width: 300px;
	height: 300px;
	align-content: center;
}

<body>
<p>Display a random image each time the buttons is clicked!</p>
<p> You get a <span id="text"></span>  </p>

<button class="getPics"> Click ! </button>
<br>
<img id="randPics" src="https://d30y9cdsu7xlg0.cloudfront.net/png/45447-200.png">

</body>

【讨论】：

哦！没看到，已经是代码的一部分了，谢谢指点，我已经更正了代码。
嗨@Dij，谢谢你的回答。但是从一开始，我就自学了要声明一个新数组，我们需要声明 var element = new Array();但我学到了一些新的东西，可以直接声明数组。
@AlanKohW.T 是的，你必须声明它，但你不需要在这里的事件处理程序中声明它，在事件处理程序之外声明它。
啊，我明白你的意思了。如果我们在事件处理程序之外声明，我们可以将所述数组重用于其他事件处理程序。正确的？ D.R.Y 原则。对不起，我对编程很陌生
好的，完成了，但由于我的声誉低于 15，所以 S.O 锁定了我的投票能力，但我想我已经接受了你的回答。 :) 再次感谢您的宝贵时间，Dij，祝您有美好的一天

【解决方案2】：

在事件处理程序之外定义 picsGallery 数组。

您可以为picsGallery 数组的每个元素定义一个包含两个元素的数组。将<img>.src设置为picsGallery[rnd][0]，将#text.textContent设置为picsGallery[rnd][1]

var randPics = document.querySelector("#randPics");
var getPics = document.querySelector(".getPics");
var text = document.querySelector("#text");

var picsGallery = [
  ["https://static2.jetpens.com/images/a/000/026/26648.jpg?mark64=aHR0cDovL3d3dy5qZXRwZW5zLmNvbS9pbWFnZXMvYXNzZXRzL3dhdGVybWFyay5wbmc&markalign64=dG9wLHJpZ2h0&markscale=19&s=938428f6eca690069a86f66d0754444b", "pen"],
  ["http://assets.sajiansedap.com/media/article_image/cover/large/25505-cara-memilih-nanas-yang-matang.jpg", "pineapple"],
  ["https://cdn.shopify.com/s/files/1/1030/8703/products/epal-hijau-green-apple-each-sebiji_1024x1024.jpg?v=1487817043", "apple"]
];

getPics.addEventListener("click", function() {
  var rnd = Math.floor(Math.random() * picsGallery.length);
  //change the pics locations of the source
  randPics.src = picsGallery[rnd][0];
  text.textContent = picsGallery[rnd][1];
});

#randPics {
  width: 300px;
  height: 300px;
  align-content: center;
}

<body>
  <p>Display a random image each time the buttons is clicked!</p>
  <p> You get a <span id="text"></span> </p>

  <button class="getPics"> Click ! </button>
  <br>
  <img id="randPics" src="https://d30y9cdsu7xlg0.cloudfront.net/png/45447-200.png">

</body>

【讨论】：

【解决方案3】：

我对您的代码进行了一些更改 - 将所有图像与文本相关联，并将它们存储在 JavaScript 对象中，而不是数组中。剩下的差不多就是你写的了。

<!DOCTYPE html>
<html>
<head>
  <title></title>
<style type="text/css">

    #randPics{
      width: 300px;
      height: 300px;
      align-content: center;
    }

</style>
</head>
<body>
    <body>
    <p>Display a random image each time the buttons is clicked!</p>
    <p> You get a <span id="text"></span>  </p>

    <button class="getPics"> Click ! </button>
    <br>
    <img id="randPics" src="https://d30y9cdsu7xlg0.cloudfront.net/png/45447-200.png">

<script>
    var randPics = document.querySelector("#randPics");
    var getPics = document.querySelector(".getPics");


    getPics.addEventListener("click", function(){ 
    //array to store images for the random image generator
    var picsGallery =  {"bar": "https://static2.jetpens.com/images/a/000/026/26648.jpg?mark64=aHR0cDovL3d3dy5qZXRwZW5zLmNvbS9pbWFnZXMvYXNzZXRzL3dhdGVybWFyay5wbmc&markalign64=dG9wLHJpZ2h0&markscale=19&s=938428f6eca690069a86f66d0754444b", "foo":
    "http://assets.sajiansedap.com/media/article_image/cover/large/25505-cara-memilih-nanas-yang-matang.jpg",
     "tux":"https://cdn.shopify.com/s/files/1/1030/8703/products/epal-hijau-green-apple-each-sebiji_1024x1024.jpg?v=1487817043"}
     
     //generate random no to select the random images
    var gkeys = Object.keys(picsGallery);
    var rnd = Math.floor(Math.random() * gkeys.length);
    //change the pics locations of the source
      randPics.src=picsGallery[gkeys[rnd]]
      document.getElementById("text").innerHTML = gkeys[rnd];  
      });

</script>
</body>
</html>

【讨论】：

【解决方案4】：

在我们开始谈论计算机视觉等之前，让我们保持简单：

最简单的方法是在两组数据之间建立某种关系。我们拥有的数据集是：

文本：主题的描述。
链接：指向代表主题的图像的链接。

在某些情况下，可以从链接中提取有关主题（青苹果）的一些信息，但是我们需要在链接（或某种字典）中找到一个结构才能解析它。

一个简单的解决方案是将链接数组交换为具有 2 个键的对象数组：

文字
链接

在该数组中选择一个随机条目可以让您即时访问文本和链接。这也是最简洁的解决方案，因为它允许您随时添加更多字段。

【讨论】：