文章/答案/技术大牛

发布

社区首页 >问答首页 >jQuery-AJAX硬币API

问jQuery-AJAX硬币API
EN

Stack Overflow用户

提问于 2020-09-01 21:12:07

回答 1查看 234关注 0票数 0

你好，这是一个学校项目(HTML，CSS，jQuery，AJAX)，我所做的一切都很好，但我确实有两个小问题。

More info按钮:它不是向我展示每枚硬币的信息，而是同时显示所有硬币的相同信息。
搜索按钮--不是在搜索，我能知道我在这里做了什么吗？这是代码：

// -------- Show all the coins onload -------- //
$(document).ready(showAllCoins());

// --------------------------------- Show all fonts onload function --------------------------------- //
function showAllCoins() {
    $.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="card">
<div class="card-body">
<span>
<p id="coin-sym"><strong>symbol:</strong> ${data[i].symbol}<br>
<strong>name:</strong> ${data[i].name}</p>
<button class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#${data[i].id}" onClick="moreInfo('${data[i].id}')">More Info</button>
<div class="collapse" id="a${data[i].id}">details added here</div>
</span>
</div>
</div>
</div>
`)
            }
        }
    })
}


// --------------------------------- Search Function --------------------------------- //
function searchCoins() {
    $.ajax(
        {
            type: 'GET',
            datatype: 'json',
            url: "https://api.coingecko.com/api/v3/coins/" + searchInput.value,
            success: function (data) {
                searchCoin[0] = data
                $(".searchResult").html($(`.${searchInput}`));
                console.log(data)
            },
            error: function (error) {
                console.log("error : ", error);
            }
        }
    );
}

// ---------------------------------More info function --------------------------------- //
function moreInfo(id) {
    $.ajax({
        url: "https://api.coingecko.com/api/v3/coins/" + id,
        dataType: "json",
        success: function (data) {
            $(".card").append(`
<div class="card-body">
<div><img src=${data.image.small}/>
<p>Price List:</p>
<ul>
<li>${data.market_data.current_price.usd} $</li>
<li>${data.market_data.current_price.eur} €</li>
<li>${data.market_data.current_price.ils} ₪</li>
</ul>
</div>
`)
        }
    })
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>
    <div class="container-fluid" id="container">
        <div>
            <form class="form-inline">
                <input class="form-control" type="search" placeholder="Type something.." aria-label="Search"
                    id="searchInput">
                <button class="btn btn-success" type="button" id="searchButton" onclick="searchCoins()">Search</button>
            </form>
        </div>
        <div class="card-columns">
            <div class="coins" id="coinsLoad"></div>
        </div>
    </div>

</body>

</html>

jquery

ajax

api

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-09-01 21:51:16

对于第二个问题，我无法理解，因为您使用类searchResult引用了一个元素，我没有看到。

对于第一个问题，您需要更改这一行：

$(".card").append(`

至：

 $('#' + id).closest(".card").append(`

这是为了显示详细的信息，只为点击按钮。无论如何，我建议避免内联事件处理程序。

$(function () {
    // -------- Show all the coins onload -------- //
    showAllCoins();
});


// --------------------------------- Show all fonts onload function --------------------------------- //
function showAllCoins() {
    $.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="card">
                        <div class="card-body">
                        <span>
                        <p id="coin-sym"><strong>symbol:</strong> ${data[i].symbol}<br>
                <strong>name:</strong> ${data[i].name}</p>
                <button class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#${data[i].id}" onClick="moreInfo('${data[i].id}')">More Info</button>
                <div class="collapse" id="${data[i].id}">details added here</div>
                </span>
                </div>
                </div>
                </div>
`)
            }
        }
    })
}


// --------------------------------- Search Function --------------------------------- //
function searchCoins() {
    var valTosearch = $('#searchInput').val()
    $.ajax(
            {
                type: 'GET',
                datatype: 'json',
                url: "https://api.coingecko.com/api/v3/coins/" + valTosearch,
                success: function (data) {
                    $(".searchResult").html($(`.${searchInput}`));
                    console.log(data)
                },
                error: function (error) {
                    console.log("error : ", error);
                }
            }
    );
}

// ---------------------------------More info function --------------------------------- //
function moreInfo(id) {
    $.ajax({
        url: "https://api.coingecko.com/api/v3/coins/" + id,
        dataType: "json",
        success: function (data) {
            if ($('#' + id).closest(".card").find('.card-body').length == 1) {
            $('#' + id).closest(".card").append(`
                  <div class="card-body">
                          <div><img src=${data.image.small}/>
                  <p>Price List:</p>
                  <ul>
                  <li>${data.market_data.current_price.usd} $</li>
                  <li>${data.market_data.current_price.eur} €</li>
                  <li>${data.market_data.current_price.ils} ₪</li>
                  </ul>
                  </div>
          `);
          }
        }
    })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container-fluid" id="container">
    <div>
        <form class="form-inline">
            <input class="form-control" type="search" placeholder="Type something.." aria-label="Search"
                   id="searchInput">
            <button class="btn btn-success" type="button" id="searchButton" onclick="searchCoins()">Search</button>
        </form>
    </div>
    <div class="card-columns">
        <div class="coins" id="coinsLoad"></div>
    </div>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63695523

复制

相似问题

问jQuery-AJAX硬币API
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery-AJAX硬币APIEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery-AJAX硬币API
EN