Javascript 如何使用口袋妖怪API显示与点击图像相关的信息？_Javascript_Jquery

Javascript 如何使用口袋妖怪API显示与点击图像相关的信息？

javascript jquery

Javascript 如何使用口袋妖怪API显示与点击图像相关的信息？,javascript,jquery,Javascript,Jquery,我试图从口袋妖怪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="

我试图从口袋妖怪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>


Pokedex v 2.0

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;
        }     
    })
});

$（文档）.ready（函数（）{
for（i=1；i您的click事件使用在for循环中定义的i变量。由于click中的函数始终在循环完成后调用，因此i始终为152。您需要从click事件中读取当前pokemon：
$('img').on('click', function(e){
    var pokemonId = e.target.id.split('pokepic')[1];
    $.get("http://pokeapi.co/api/v1/pokemon/" + pokemonId +"/", function(data){
        ...
    });
});

我建议您检查eventListeners。现在您尝试使用jquery的click（）函数进行检查，但使用document.ready可以在jquery启动之前对加载的图片进行检查。使用eventListeners，您可以控制所有DOM