0

我正在尝试让 Javascript 股票行情器工作，它进展顺利，但我对 Javascript 的了解处于初学者水平 - 但我正在学习！

  • 当前代码使用谷歌金融 API 提取实时股票数据。
  • 它检查以查看股票首字母缩写词并打印完整的公司名称
  • 并有一些不同的造型

我想要完成的是让股票数据在列中打印出来，我似乎无法在 html 中执行此操作，并且在查看 Javascript 表后，我认为这需要编写为 Javascript。

我需要创建 3 列；1 代表股票名称，例如 (HAULOTTE)，1 代表股票缩写，例如 (PIG)，1 代表实时股票数字。这将确保每个股票数据行与其上方和下方的数据行保持平行。

附上当前的jsfiddle：

https://jsfiddle.net/feq3L57p/

var gstock = ["EPA:PIG","LON:AHT","NYSE:URI","NYSE:TEX" ,"NYSE:CAT", "NASDAQ:HEES", "NASDAQ:MNTX", "VIE:PAL" ];
$(document).ready(function () {
       for (var i = 0; i < gstock.length; i++) {
        $.getJSON("https://finance.google.com/finance/info?client=ig&q="+gstock[i]+"&callback=?", function (response) {
            var stockInfo1 = response[0];
            var divContainer =  $('*[data-symbol="' + stockInfo1.t +'"]');

            var stockString1 = '<div class="stockWrapper">' + divContainer.data('title') + ':';
            var stockName1 = stockInfo1.t;             
            stockString1 += '<span class="stockSymbol "> '  +  stockInfo1.t + ' </span>';
            stockString1 += '<span class="stockPrice "> '  +  stockInfo1.l  + '</span>';
            stockString1 += '<span class="stockChange "> '  +  stockInfo1.c + '</span>';
            stockString1 += '</div>';
            divContainer.append(stockString1);

        });
    }
});
4

1 回答 1

0

这是一个基本的专栏示例，应该可以帮助您上路。它模仿了我对您要求的布局的理解。总体思路：嵌套divs，设置column width，float: left用于正确的container div。

HTML：

<div class="box">
<div class="floatleft2 " style="padding:5px;">
    <div>Stock Name Info</div>
    <div>Stock Name Info</div>
    <div>Stock Name Info</div>
    <div>Stock Name Info</div>
</div>
<div class="floatleft2" style="padding:5px;">
    <div>Symbol Info</div>
    <div>Symbol Info</div>
    <div>Symbol Info</div>
    <div>Symbol Info</div>
</div>
<div class="floatleft2" style="padding:5px;">
    <div>Figure Info</div>
    <div>Figure Info</div>
    <div>Figure Info</div>
    <div>Figure Info</div>
</div>
</div>

CSS：

.box {width:800px; margin:auto; }
.floatleft2 {float: left; width: 150px; margin:5px; }
于 2015-05-26T10:47:25.200 回答