0
は私が現時点でポケモンAPIを使用してクリックされた画像に関連する情報を表示するにはどうすればよいですか？
HTMLコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="pokedex2.js"></script>
<link rel="stylesheet" href="pokedex2.css">
<title>Pokedex v 2.0</title>
</head>
<body>
<div id="all">
<div id="pokemon">
</div>
<div id="chosen">
</div>
</div>
</body>
</html>
はJavaScript
$(document).ready(function(){
for(i = 1; i <=151; i ++){
$("#pokemon").append("<img id=pokepic" + i + "
src='http://pokeapi.co/media/img/" + i +
".png'>");
}
var clicked = false;
$("img").click(function(){
clicked = true;
console.log(this);
if(clicked){
$.get("http://pokeapi.co/api/v1/pokemon/" + i +"/", function(data){
var str = "";
str += "<h4>Types</h4>";
str += "<ul>";
var str2 = "";
str2 += "<h4>height</h4>";
str2 += "<ul>";
var str3 = "";
str3 += "<h4>weight</h4>";
str3 += "<ul>";
for(i = 0; i < data.types.length; i ++){
str += "<li>" + data.types[i].name + "</li>";
}
str2 += "<li>" + data.height + "</li>";
str3 += "<li>" + data.weight + "</li>";
str += "</ul>"
str2 += "</ul>"
str3 += "</ul>"
$("#chosen").html(str + str2 + str3); }, "json");
}
else{
clicked = false;
}
})
});
を取得し、ポケモンAPIからクリックされたポケモンの画像や情報を表示しようとしている、唯一の情報があることポケモンをクリックしたのではなく、リストの最初の3つのポケモンのためのものです。私はポケモンのような、クリックされたポケモンに関連する情報を見つける必要があります。
コンソールには、クリックされた画像、画像、およびその画像に関連付けられたpokepic ID番号が表示されます。代わりに、私が必要とするのは、各画像に関連付けられた画像と統計情報が、選択されたラベルのdivに表示されることです。
eventListenersをチェックすることをお勧めします。これで、jqueryのclick（）関数でチェックしようとしていますが、jQueryを起動する前に読み込まれた画像に対してwithdocument.readyが機能します。イベントリスナーを使用すると、すべてのDOMを制御することができます – Vyacheslav