引用 150 个名称相同但后面有数字的图像的点击事件

Question

你好，我有一个 pokedex 的提取，我希望在点击事件中引用 pokedex 中的每个图像，

https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png

对于我获取的所有口袋妖怪，png 之前的 1 从 1-150 变化，所以有没有办法像 "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${i}.png"

那样对其进行插值

并制作一个 for 循环我希望能够单击图片并显示口袋妖怪的统计信息我已经准备好所有这些信息以供参考我只需要能够将图片作为他们自己的 ID点击事件

Answer 1

你的意思是这样的？

document.getElementById("placehere").innerHTML = Array.from({length: 10},  // change to whatever number
    (_, i) => `<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${i+1}.png"/>`)
  .join("")

<div id="placehere"></div>

较早的答案

const pokemons = [
  {name:"bla1", id:1},
  {name:"bla2", id:2}
];

document.getElementById("result").innerHTML = pokemons.map(pokemon => `<a href="/${pokemon.name}.html"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png"></a>`).join("")

<div id="result"></div>

或

const pokemons = [{name:"bla1"},{name:"bla2"}];

document.getElementById("result").innerHTML = pokemons.map((pokemon,i) => `<a href="/${pokemon.name}.html"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${i+1}.png"></a>`).join("")

<div id="result"></div>

引用 150 个名称相同但后面有数字的图像的点击事件

Referencing for an on click event for 150 images that are named the same but have numbers after them

html

javascript

interpolation

image