2015-08-20 84 views
4

我想在jquery中派生一個百分比變化。我有一個股票代碼,它正在提取2個值,一個是價值和一個是變化的價值。我希望能夠派生出這個百分比並且顯示這個值。在Jquery中導出一個百分比

我正在努力做到這一點,我想知道是否有更簡單的方法來做到這一點。

現有的例子可以在這裏找到:https://jsfiddle.net/hykdeyoz/

$(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; 
       var stockChange = ""; 

我想變成一個個都在紅色和綠色(綠色開啓表示水平上升或下降)

問題的價值:

「你想,如果‘200’爲紅色&‘10‘在紅&‘5%’是綠色的,然後它會顯示爲’200’的綠色 - 薩克8分鐘前」

是的,儘管200可以理想地隱藏起來。並只顯示百分比。如果百分比是積極的,它應該是綠色的,如果它是負的百分比,那麼它應該是紅色的。我用你的問題來編輯主帖。謝謝 - 薩姆威爾遜1分鐘前編輯

謝謝。

+0

如果「200」是紅色的,「10」是綠色的,那麼它會顯示爲「200」紅色和「5%」綠色? – Sachin

+0

是的,但200可以理想地隱藏。並只顯示百分比。 如果百分比是正值,它應該是綠色的,如果是負值百分比,則應該是紅色。我用你的問題來編輯主帖。謝謝 –

+0

https://jsfiddle.net/hykdeyoz/09/謝謝:) –

回答

4

我已更新your fiddle根據您的需要。一探究竟。

var percentStock = ((parseFloat(stockInfo1.c)/parseFloat(stockInfo1.l)) * 100); 
percentStock = Number((percentStock).toFixed(2)); 
+0

您正在使用外部數據。你應該檢查它是否有效,否則你最終可能會遇到類似'VOLVO VLV NaN%' – blgt

+0

Thankyou的問題,但我遇到了一個問題,雖然它可能與第三方數據有關,但它也可以更改。我相信大數字會跳轉到使用逗號,例如1,200,然後當使用較小數字導出百分比時,例如0.33更大的百分比最終引用,因爲逗號和整數不能很好地協同工作?這些結果顯示爲異常大的百分比。 –

+0

是的,我現在已經處理了這些條件。 –

1

這裏是你的答案updated Fiddle

var percentage = (parseFloat(stockInfo1.c) * 100/parseFloat(stockInfo1.l)).toFixed(2); 

我已經加入邏輯顯示綠色&紅是在這裏:

if(parseFloat(stockInfo1.c) > 0) 
    stockChange += '<span class="stockChange "> '; 
else 
    stockChange += '<span class="stockPrice "> '; 

忽視楠:

var percentage = (parseFloat(stockInfo1.c) * 100/parseFloat(stockInfo1.l)).toFixed(2); 
if(isNaN(percentage)) 
    percentage = 0; 

最後加個..

stockChange += percentage + '% </span>'; 

這樣你就不會得到「背景顏色變化」這個問題..

+0

他的造型和替代行CSS不與百分比一起工作。百分比單元格的灰色背景並不總是與行顏色匹配。有沒有簡單的方法來解決這個問題。再次感謝 –

+0

我無法得到你想問的問題。百分比單元格的灰色背景與行的背景顏色相同。看到我的小提琴.. – Sachin

+0

如果你看看https://jsfiddle.net/hykdeyoz/10/和https://jsfiddle.net/hykdeyoz/8/。在版本10中,百分比已經解決,但百分比列現在已經改變了顏色(顏色很細微,所以它可能不明顯)在版本10中,沒有任何百分比的「死」股票列表也出現在列表的底部不像早期的版本。 –

1

我假設你想要顯示的百分比變化相比,之前的值,因此您需要通過反轉更改來計算舊值,並顯示與此相比的百分比。

var newValue = parseFloat(stockInfo1.l.replace(/,/g, "")); 
var change = parseFloat(stockInfo1.c.replace(/,/g, "")); 
var oldValue = newValue - change; 
var percentChange = (change/oldValue * 100).toFixed(2); 

stockString1 += '<span class="stockSymbol "> ' + stockInfo1.t + ' </span>'; 
stockChange += '<span class="stockPrice "> ' + stockInfo1.l + '</span>'; 
stockChange += '<span class="stockChange "> ' + percentChange + '%</span>'; 

正如@blgt所指出的那樣,沒有數據驗證,當改變是正面或負面時,也沒有不同的顏色。