Плагин Ajax JQuery и Collapse - PullRequest
Новая
       11

Плагин Ajax JQuery и Collapse

0 голосов
/ 18 декабря 2018

так что я получил этот проект в своем классе.Мне нужно получить электронные монеты из конкретного 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>`)
    })
  }
...