1. 首页
  2. 问答
  3. 如何将文本与Javascript中的图像相关联？

如何将文本与Javascript中的图像相关联？

2017-07-30 89 views
0

我在这里问一个简单的问题。我在这里创建一个工作随机发生器：如何将文本与Javascript中的图像相关联？

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{ 
 
\t width: 300px; 
 
\t height: 300px; 
 
\t 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>

当用户在按钮上点击时，图像源将随机选择的阵列中的图像中的一个。不过，我有一点问题。如何将文本与图像关联？例如，如果用户单击该按钮，他拿到笔的图像，文本

你得到一个

应更改为

你得到一个笔。

谢谢你的帮助！

来源

2017-07-30 Alan Koh W.T

回答

1

首先，你需要在一些地方保存文本，然后你必须有办法的文字图像关联，为此，你可以存储在一个对象图像相关的文本，然后有这样的对象的数组，而不是只是一个图像网址阵列。你也不必声明事件处理函数内部数组，你可以定义一次，然后用它里面的功能，因为它会在范围之内。是这样的：

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{ 
 
\t width: 300px; 
 
\t height: 300px; 
 
\t 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>

来源

2017-07-30 16:37:40 Dij

+0

哦！我没有看到，它已经是代码的一部分，感谢您指点，我已经更正了代码。 – Dij

+0

嗨@Dij，谢谢你的回答。但是从一开始我就自学成功，为了声明一个新的数组，我们需要声明var element = new Array（）;但是我学到了一些可以直接声明的新数组。 –

+0

@ AlanKohW.T是的，你必须声明它，但是你不需要在这里的事件处理器中声明它，在事件处理器之外声明它。 – Dij

0

定义事件处理程序之外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>

来源

2017-07-30 16:41:10 guest271314

0 

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"]; 
 
    
 
var picsGalleryDesc = new Array(); 
 
    picsGalleryDesc = ["pen", "pineapple", "apple"] 
 
    
 
//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]; 
 
    text.innerHTML=picsGalleryDesc[rnd]; 
 
    });
#randPics{ 
 
\t width: 300px; 
 
\t height: 300px; 
 
\t 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>

你总是可以创建另一个数组并使用相同的参考rnd

来源

2017-07-30 16:42:49 yuenhy

+0

我意识到这不是最有效的;因为在将来如果你想将更多的字段关联到图像，你将不得不创建新的数组;抱歉 – yuenhy

0

我已经改变了你的代码位 - 与文字相关的所有图像，并将它们存储的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>

来源

2017-07-30 16:43:36 marmeladze

0

，然后才开始谈论计算机视觉等可以保持这种简单：

最简单的方法，这是由有两组数据之间的一些关系。我们拥有的数据集有：

  1. 文本：对主题的描述。
  2. 链接：指向表示主题的图片的链接。

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

一个简单的解决办法是用2个键来交换你的链接数组对象的数组：

  • 文本
  • 链接

采摘数组中随机进入将给你可以即时访问文本和链接。这也是最干净的解决方案，因为它允许您随时添加更多字段。

来源

2017-07-30 16:44:20

相关问题

 相关问题