如何顯示相對於圖像使用口袋妖怪API單擊了信息？

我試圖獲取和顯示來自口袋妖怪API被點擊的小寵物的圖像和信息如何顯示相對於圖像使用口袋妖怪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; 
     }  
    }) 
});

目前，唯一的信息是長大是在列表中的第3只小寵物，而不是爲被點擊的寵物小精靈。我需要找到與點擊的寵物小精靈相關的信息，比如pokedex。

我包括的console.log表明點擊取其圖像，圖片，和與該圖像相關聯的pokepic ID號碼出現在控制檯中。相反，我需要的是與每個圖像有關的圖像和統計信息顯示在一個標選擇的DIV

來源

2017-08-31 user8402521

我建議你檢查事件偵聽器。現在你嘗試檢查與jQuery的點擊（）函數，但withdocument.ready將所加載圖片的jQuery工作開始前。隨着事件監聽器就可以控制所有的工作完美的DOM – Vyacheslav

點擊事件中使用的定義循環變量i。由於循環完成後，點擊裏面的函數總是叫，我永遠是152.您需要從您的單擊事件讀取當前口袋妖怪：

$('img').on('click', function(e){ 
    var pokemonId = e.target.id.split('pokepic')[1]; 
    $.get("http://pokeapi.co/api/v1/pokemon/" + pokemonId +"/", function(data){ 
     ... 
    }); 
});

來源

2017-08-31 21:00:26

，感謝你的幫助 – user8402521

如何顯示相對於圖像使用口袋妖怪API單擊了信息？

回答

相關問題