Halo ini adalah proyek sekolah (HTML,CSS,jQuery,AJAX), semua yang saya lakukan baik-baik saja tetapi saya memiliki dua masalah kecil di sana.

  1. Tombol info lebih lanjut: Alih-alih menunjukkan kepada saya info untuk setiap koin, ini menunjukkan kepada saya info yang sama untuk semua koin sekaligus.
  2. Tombol Cari - tidak mencari, bisakah saya tahu apa yang saya lakukan salah di sini? Ini kodenya:
// -------- 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>
0
FullStack-StudentK 2 September 2020, 00:12

1 menjawab

Jawaban Terbaik

Untuk masalah kedua saya tidak bisa mengerti karena Anda merujuk elemen dengan kelas searchResult Saya tidak mengerti.

Untuk masalah pertama Anda perlu mengubah baris ini:

$(".card").append(`

Untuk:

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

Ini untuk menampilkan info detail hanya untuk tombol yang diklik. Bagaimanapun saya akan menyarankan untuk menghindari penangan acara sebaris.

$(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
gaetanoM 2 September 2020, 13:41