В настоящее время создаю школьный проект с ajax и bootstrap. Я должен показывать крипто-монеты в div и нажимать на кнопку дополнительной информации, чтобы показать изображение нажатой монеты, но он продолжает показывать мне все изображения только на одной карте.
Я понимаю, что мне нужно сделать обещание на getInfo (), но как?
/// <reference path="jquery-3.4.1.js" />
"use strict";
$(function () {
$("#homeLink").click(() => {
$("#coinsDiv").empty();
$.ajax({
url: "https://api.coingecko.com/api/v3/coins/list",
error: err => alert("Error: " + err.status),
success: coins => {
console.log(coins)
let html = "";
for (let i = 0; i < 100; i++) {
const div = `<div class="card">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">${coins[i].symbol}</h4>
<hr>
<!--CoinId-->
<p id="btn" class="card-text">${coins[i].id}</p>
<button data-toggle="collapse" data-target="#demo">More info</button>
<div id="demo" class="collapse">
${getInfo(coins[i].id)}
</div>
</div>`
html += div;
}
$("#coinsDiv").append(html)
}
});
});
window.getInfo = id => {
$.ajax({
url: "https://api.coingecko.com/api/v3/coins/" + id,
error: err => alert ("Error: " + err.status),
success: function(coins) {
$("#demo").append(`<p><img src="${coins.image.thumb}"></p>`);
}
});
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CryptoZilla</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="jquery-3.4.1.js"></script>
<script src="home.js"></script>
<script src="main.js"></script>
<script src="reports.js"></script>
<script src="about.js"></script>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a href="javascript:void" class="navbar-brand">
CryptoZilla
<img src="/assets/images/zilla.png" height="58" alt="CryptoZillaLogo">
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a id="homeLink" href="javascript:void(0)" class="nav-item nav-link">
<i class="fa fa-home"></i> Home
</a>
<a id="reportsLin" href="javascript:void(0)" class="nav-item nav-link">
<i class="fa fa-line-chart"></i> Reports
</a>
<a id="aboutLink" href="javascript:void(0)" class="nav-item nav-link">
<i class="fa fa-user"></i> About
</a>
</div>
<form class="form-inline ml-auto">
<input type="text" class="form-control mr-sm-2" placeholder="Search Coin">
<button type="submit" class="btn btn-outline-light">Search</button>
</form>
</div>
</nav>
<!--Navbar-->
<div class="container" id="coinsDiv">
<div class="card-deck">
</div>
</div>
I
<!--footer-->
<div id="contant-wrap">
<!--footer content-->
</div>
<footer id="footer">
<p>© 2020 Copyright: CryptoZilla™</p>
</footer>
<!--footer-->
</body>
</html>