1. ホーム
  2. 質問と答え
  3. Javascriptで画像にテキストを関連付けるには？

Javascriptで画像にテキストを関連付けるには？

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

最初にテキストをどこかに保存してからテキストを画像に関連付ける方法が必要です。このため、画像に関連付けられたテキストをオブジェクトに保存してから、画像の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{ 
 
\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配列の各要素ごとに2つの要素を含む配列を定義できます。あなたはいつも同じ参照を別の配列を作成し、使用することができ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>

にpicsGallery[rnd][0]に<img>.src、および#text.textContentを設定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

我々はなど、コンピュータビジョンの話を始める前に、このシンプルに保つことができます：

これまで最も簡単な方法は、2つのデータセット間の何らかの関係を持つことです。私たちが持っているデータセットは：

  1. テキスト：対象の説明です。
  2. リンク：被写体を表す画像へのリンク。

場合によっては、リンクから対象（緑色のリンゴ）に関する情報を抽出することもできますが、リンク（または何らかの種類の辞書）を解析する必要がありますそれ。

簡単な解決策は、2つのキーを持つオブジェクトの配列のためにリンクのあなたの配列を交換するために、次のようになります。その配列内のランダムなエントリをピッキング

  • テキスト
  • リンク

を与えるだろうテキストとリンクの両方にすぐにアクセスできます。これはまた、より多くのフィールドを追加することができるので、最もクリーンなソリューションです。

出典

2017-07-30 16:44:20

関連する問題

 関連する問題