1. 首頁
  2. 問答
  3. 如何將文本與Javascript中的圖像相關聯？

如何將文本與Javascript中的圖像相關聯？

2017-07-30 30 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

相關問題

 相關問題