API文本不显示粗体和空格

Question

你好，这是我第一次使用API，我使用了coinmarketcap的API https://coinmarketcap.com/api/

这是我的javascript代码：

    $.get("https://api.coinmarketcap.com/v1/global/", function(data) {      
    $("#altcoin_percentage_of_market_cap").html (100 - data.bitcoin_percentage_of_market_cap.toFixed() + "%");   
    $("#total_market_cap_usd").html("$" + data.total_market_cap_usd.toLocaleString()); 
    });    

$(document).ready(function() {
    $('input#autocomplete').autocomplete({
        source: source,
        select: function(event, ui) {
            window.location.href = ui.item.value;
        },
    });
});

这是我的html

<div class="alt-coins-info">
    <p>
            <i class="fa fa-newspaper"></i>
            Added Altcoins: <b>10</b> / 
            <!-- "altcoin_percentage_of_market_cap" not bold. no space between % en / -->
            Total Altcoin Marktcap: <b><div id="altcoin_percentage_of_market_cap" > </div></b> / 
            <!-- no space between % en / -->
            Total Altcoin Dominance: <b><div id="total_market_cap_usd" > </div></b>
    </p>
</div>

存在一个问题，"altcoin_percentage_of_market_cap“没有粗体，%和/之间也没有空格，即使是我给它的标签。

谢谢你的阅读，我希望有人能帮我。

Answer 1

您正在使用块级元素(div)，使用span来呈现数据.

​

$.get("https://api.coinmarketcap.com/v1/global/", function(data) {
  $("#altcoin_percentage_of_market_cap").html((100 - data.bitcoin_percentage_of_market_cap.toFixed()) + "%");
  $("#total_market_cap_usd").html("$" + data.total_market_cap_usd.toLocaleString());
});

$(document).ready(function() {
  $('input#autocomplete').autocomplete({
    source: 'source',
    select: function(event, ui) {
      window.location.href = ui.item.value;
    },
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="alt-coins-info">
    <p>
            <i class="fa fa-newspaper"></i>
            Added Altcoins: <b>10</b> / 
            <!-- "altcoin_percentage_of_market_cap" not bold. no space between % en / -->
            Total Altcoin Marktcap: <b><span id="altcoin_percentage_of_market_cap" > </span></b> / 
            <!-- no space between % en / -->
            Total Altcoin Dominance: <b><span id="total_market_cap_usd" > </span></b>
    </p>
</div>

​

Answer 2

b、span等是内联容器https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

div是一个块容器。将<div id="altcoin_percentage_of_market_cap" >替换为<span id="altcoin_percentage_of_market_cap" >

​

<div class="alt-coins-info">
    <p>
            <i class="fa fa-newspaper"></i>
            Added Altcoins: <b>10</b> / 
            <!-- "altcoin_percentage_of_market_cap" not bold. no space between % en / -->
            Total Altcoin Marktcap: <b><span id="altcoin_percentage_of_market_cap" > </span></b> / 
            <!-- no space between % en / -->
            Total Altcoin Dominance: <b><span id="total_market_cap_usd" > </span></b>
    </p>
</div>

​