Question

我有一个关于API的学校项目，在引导崩溃内显示特定数据时遇到问题。

我有一个学校项目，在这里我从API服务器获取有关硬币的数据并提出。每个硬币都显示在不同的div中，并且在该div中有一个按钮。此按钮是“更多信息”，应该通过具有特定ID（类似于硬币）的链接显示有关该硬币的更多信息。我设法展示了来自API服务器的数据，但无法使按钮正常工作。这是“更多信息”按钮的链接：https://api.coingecko.com/api/v3/coins/ {id}

这是html：

    <body>
    <div class = "header">
        Cryptonite
    </div>
    <div class="line"></div> </br>
    <div class="container">
        <div class="navigation">
            <div id="buttons">
                <button type="button" class="btn btn-link" id="home-btn" onClick="selectTab" name="home">Home</button>
                <button type="button" class="btn btn-link" id="live-btn" onClick="selectTab" name="live">Live Reports</button>
                <button type="button" class="btn btn-link" id="about-btn" onClick="selectTab" name="about">About</button>
            </div> 
            <div class="search">
                <input type="search" placeholder="Search" aria-label="Search through site content"/> <button type="button" class="btn btn-link" id="src-btn" name="src">Search</button>
            </div>
        </div>
    </br>
        <div class="coins">

        </div>
    </div>
</body>

这是脚本：

//This is the function to call the data from the API server
function callCoins() {    
$.ajax({
    url: "https://api.coingecko.com/api/v3/coins/list",
    dataType: "json",
    success: function(data){
        console.log(data);
        for(let i=0;i<100;i++){
            $(".coins").append(`
                <div class="coin">
                    <span>
                        <p id="coin-sym">${data[i].symbol}</p>
                        <p>${data[i].name}</p>
                        <button class="btn btn-primary" data-toggle="collapse" data-target="#a${data[i].id}">More Info</button>
                        <div class="collapse" id="a${data[i].id}">example</div>
                    </span>
                    <div class="custom-control custom-switch">
                     <input type="checkbox" class="custom-control-input" id="b${data[i].id}">
                     <label class="custom-control-label" for="#b${data[i].id}"></label>
                    </div>
                </div>
                </br>
            `)

        }
    }
})
}

//This is the function for 'More Info'
function moreInfo() {
    $.ajax({
        url: "https://api.coingecko.com/api/v3/coins/{id}",
        dataType: "json",
        success: function(data){
            $(".collapse").append(`
                <div class="moreInfo">
                    <span>
                        <p>${data.image.thumb}</p>
                    </span>
                </div>
            `)
        }
    })
}

当我单击“更多信息”时，它应显示来自具有硬币特定ID的链接的数据。

这里是Demo File

Answer 1

似乎您没有在单击按钮时调用moreInfo函数。因此您的“更多信息HTML按钮”必须是这样的。

<button class="btn btn-primary" data-toggle="collapse" data-target="#a${data[i].id}"  onClick="moreInfo('${data[i].id}')">More Info</button>

和moreInfo()函数就是这样

function moreInfo(id) {  /* change 1 - added id parameter*/
    $.ajax({
        url: "https://api.coingecko.com/api/v3/coins/"+id, /* change 2 - added the id parameter to the api call */
        dataType: "json",
        success: function(data){
            $(".collapse").append(`
                <div class="moreInfo">
                    <span>
                        <p>${data.image.thumb}</p>
                    </span>
                </div>
            `)
        }
    })
}

希望这会有所帮助。为了使其显示为图像，您需要在p标签内添加一个image标签，并将该图片的URL绑定到src属性中。

如何在引导折叠/模式内显示来自API的数据？

1 个答案: