gpt4 book ai didi

javascript - 如何使用 pokemon API 显示与点击的图像相关的信息?

转载 作者:行者123 更新时间:2023-12-03 03:33:16 25 4
gpt4 key购买 nike

我正在尝试从 pokemon API 获取并显示点击的 pokemon 的图像和信息

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 个神奇宝贝的信息,而不是被单击的神奇宝贝的信息。我需要找到与点击的神奇宝贝相关的信息,例如图鉴。

我添加了 console.log 来显示无论单击哪个图像,与该图像关联的图片和 pokepic ID 号都会出现在控制台中。相反,我需要的是与每个图像相关的图像和统计信息出现在标记为“selected”的 div 中

最佳答案

您的点击事件使用 for 循环中定义的 i 变量。由于点击内的函数总是在循环完成后调用,因此 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){
...
});
});

关于javascript - 如何使用 pokemon API 显示与点击的图像相关的信息?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45989848/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com