Question

所以我在班上得到了这个项目。我需要从特定的API（加载）中获取电子硬币。这很容易，问题是我需要附加按钮（带有“更多信息”详细信息）当我单击它时-还有第二个API调用，用于特定硬币以显示更多详细信息（硬币的图像，以及价格为欧元，美元和ILS（新以色列谢克尔））我设法用append方法做到了，但是我们需要用Collapse插件来做到。我现在坐了几天，但我不能让它工作。这是代码。（！它必须作为第二个API调用来完成。我无法在2个调用加载时完成它。）

<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>`)
    })
  }

Ajax JQuery和折叠插件

0 个答案: