javascript - Ajax JQuery 和折叠插件
问题描述
所以我在课堂上得到了这个项目。我需要从特定的 API（onload）获取电子硬币。这很容易，问题是我需要附加按钮（带有“更多信息”细节），当我点击它时 - 有第二个 API 调用，用于特定硬币显示更多细节（硬币图像，和欧元、美元和 ILS（新以色列谢克尔）的价格我设法使用附加方法来做到这一点，但我们需要使用 Collapse 插件来做到这一点。我现在坐了几天，我就是无法让它工作。这是代码。（！它必须作为第二个 API 调用来完成。我不能通过 2 个调用 onload 来完成。）
<body>
<div class="container-fluid MainSite">
<div class="row">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" id="HomeBtn">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="LiveReportsBtn">Live Reports</a>
</li>
<li class="nav-item">
<a class="nav-link" id="AboutBtn">About</a>
</li>
</ul>
</div>
<div class="parallax"></div>
<div class="Cont">
<div class="col-sm-12">
<div class="row">
<input type="text" placeholder="Enter Virtual Coin Name" id="CoinName">
<input type="button" class="btn btn-warning" id="SearchCoin" value="Search.">
</div>
</div>
<div class="theCards"> </div>
</div>
</div>
<script>
$(() => {
$.getJSON("https://api.coingecko.com/api/v3/coins/list", (data) => {debugger;
for (let i = 0; i < 100; i++) {
$(".theCards").append(
`<div class="card Carding col-sm-4">
<div class="card-body">
<h1 class="card-title">${data[i].symbol}</h1>
<h2 class="card-text">${data[i].name}</h2>
</br>
<input type="button" onclick="MoreInfo(this)" id="${data[i].id}" class="btn btn-dark" value="More Info">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</div>`
)
}
})
});
function MoreInfo(elem) {debugger;
var P = elem.parentElement.parentElement
var x = elem.id
let URL = "https://api.coingecko.com/api/v3/coins/"
let Mixer = URL + x;
$.getJSON(Mixer, (data) => {
$(P).append(`<div id="${data.id}">
<img src="${data.image.small}">
<p>${data.market_data.current_price.usd}</p>
<p>${data.market_data.current_price.ils}</p>
<p>${data.market_data.current_price.eur}</p>
</div>`)
})
}