javascript - 无法复制 Javascript/Jquery 插件

Question

我有一个 jquery 股票行情指示器，我无法在同一页面上复制该行情指示器。我的想法是在同一页面上创建一个类似的股票代码，但具有不同的股票列表。它可能就像更改一些变量名称一样简单，或者我可能会遇到问题，因为 API 会导致冲突。

我花了很多时间在这上面，所以任何让这个工作正常运行的建议都会非常有帮助。

附件是我试图复制的股票代码的 JSfiddle。如果任何人都可以在同一页面上复制此股票代码，但只包含几只股票，那么这将对我有很大帮助。

JS fiddle 可以在这里找到:https://jsfiddle.net/90s6vd8z/1/

var gstock = ["NASDAQ:ASTE", "STO:ATCO-A", "JSE:BEL", "BIT:CNHI", "NYSE:DE", "KRX:042670", "EPA:PIG", "TYO:6305", "KRX:009540", "TYO:5406", "TYO:6301", "TYO:6326", "NYSE:MTU", "NYSE:MTW", "HEL:MEO1V", "VIE:PAL", "STO:SAND", "TYO:6395", "NYSE:TEX", "EBR:VLV", "FRA:WAC", "SHE:000528", "SHA:600031", "SHE:000425",  "HKG:1157", "NYSE:OSK", "OTCMKTS:BZZUY", "NYSE:CX", "ELI:CPR", "LON:CRH", "FRA:HEI", "BCBA:JMIN", "BIT:IT", "EPA:LG", "EPA:SGO", "SWX:SCHN", "EPA:SU", "HKG:1192", "OTCMKTS:WBRBY", "LON:WOS", "ASX:CIM", "ASX:LLC", "TSE:ARE", "ASX:AVJ", "VIE:STR", "SWX:IMPN", "NYSE:KBR", "BME:ACS", "ETR:HOT", "NYSE:FLR", "STO:SKA-B", "EPA:FGR", "TYO:1928", "TYO:1802", "SHA:600170", "TYO:1801", "TYO:1803", "LON:BBY", "KRX:000720", "SHA:600528", "EPA:TEC", "NYSE:JEC", "ETR:GBF", "NYSE:CBI", "BME:FER", "BME:ABG", "BME:FCC", "KRX:006360", "LON:NCC", "BME:ANA", "TSE:SNC", "FRA:1AKA", "LON:JGC", "STO:PEAB-B", "IST:ENKAI", "NYSE:EME", "LON:PFC", "NYSE:DHI", "TYO:1808", "NYSE:LEN", "NYSE:PHM", "JSE:AEG", "TYO:1944", "LON:CLLN", "BME:OHL", "AMS:BOKA", "OTCMKTS:ORSDF", "TYO:1860", "TYO:6366", "TYO:1942", "TYO:1881", "TYO:1722", "NYSE:NVR", "NYSE:TPC", "LON:BDEV", "BME:SCYR", "TYO:1821", "TYO:1893", "TYO:1719", "BME:TRE", "MCX:MSTT", "EPA:NXI", "LON:TW", "VIE:POKS", "JSE:MUR", "HKG:3311", "LON:IRV", "TYO:1861", "AMS:ARCAD", "TYO:1924", "LON:AMFW", "LON:MGNS", "LON:PSN", "TYO:1820", "BIT:AST", "ELI:EGL", "LON:KIE", "EBR:CFEB", "BIT:SAL", "HEL:LEM1S", "AMS:HEIJM", "NYSE:TOL", "NYSE:MDR", "LON:BKG", "TYO:6330", "TYO:1883", "TYO:1720", "STO:ICA", "HEL:YTY1V", "LON:GFRD", "NYSE:GVA", "OTCMKTS:DHOXQ", "LON:KLR", "ELI:TDSA", "NYSE:RYL", "NYSE:KBH", "BIT:MT", "LON:LSR", "IST:TKFEN", "LON:ISG", "TYO:1833", "TYO:1885", "NYSE:SPF", "ETR:B5A", "KRX:005830", "BOM:532693", "NYSE:HOV", "NYSE:MTH", "TYO:1762", "TLV:SKBN", "TPE:9933", "LON:BWY", "OTCMKTS:AGRUF", "TLV:AFIL", "AMS:BALNE", "BIT:TFI", "FRA:HLL", "NSE:HCC", "TYO:1884","TYO:1890", "BKK:ITD", "TYO:1815", "TYO:1852", "LON:COST", "FRA:3GH", "CPH:PAAL-B", "TYO:6960", "TYO:1822", "NYSE:BZH", "BOM:509550", "TYO:1882", "TYO:1811", "NYSE:GFA", "TYO:1805", "FRA:1GT",  "KRX:000800", "WSE:PXM", "LON:RNWH", "CPH:ARKIL-B", "BIT:VLA", "HKG:6210", "HKG:0914", "TYO:5233", "HKG:1893", "HKG:2009", "BIT:IT", "ASX:BLD", "TPE:1101", "NYSE:VMC", "TYO:5232", "NYSE:MLM", "BME:CPL", "HKG:1666", "BKK:SCC"];
$(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 divCurrency = $('*[data-currency="' + stockInfo1.d + '"]');
            var percentStock = !isNaN(stockInfo1.c) && !isNaN(stockInfo1.l) && stockInfo1.l ? ((parseFloat(stockInfo1.c)/parseFloat(stockInfo1.l)) * 100) : undefined;
            var stockString1 = '<div class="stockWrapper">' + divContainer.data('title') + ':';
            var stockName1 = stockInfo1.t;
            var stockCurency1 = stockInfo1.d;


            var stockPrice2 = "";

            stockPrice2 += '<span class="stockSymbol "> ' + stockInfo1.l + '</span>';



            var stockChange = "";
            stockString1 += '<span class="stockSymbol "> ' + stockInfo1.t + ' </span>';
            if(!isNaN(percentStock) && percentStock > 0) {
                percentStock = Number((percentStock).toFixed(2));
                stockChange += '<span class="stockChange "> ' + percentStock + ' %</span>';
            } else if(!isNaN(percentStock)) {
                percentStock = Number((percentStock).toFixed(2));
                stockChange += '<span class="stockPrice "> ' + percentStock + ' %</span>';
            } else {
                stockChange += '<span class="stockPrice "></span>';
                stockChange += percentage + '% </span>';


            }
            stockString1 += stockChange + '</div>';
            $("#title").append("<div>" + divContainer.data('title') + "</div>");
            $("#symbols").append("<div><b>" + stockInfo1.t + "</b></div>");
          $("#currency").append("<div><b>" + $(divContainer).attr( 'data-currency') + "</b></div>");
            $("#livePrice").append("<div>" + stockPrice2 + "</div>");
            $("#liveData").append("<div>" + stockChange + "</div>");
            divContainer.append(stockString1);

        });
    }
});

Answer 1

它不起作用的原因是您使用了id/#

每页只能有 1 个 ID，每页有多个 ID 会导致不良行为。为了创建一个可以在每个页面多次使用的插件，您必须使用类。

所以 - 将 $('#title') 和 id="title" 更改为 $('.title') 和 class="title"