比較引導縮略圖中的舊價格和新價格？

如可從下面的代碼我使用的模板中var sProductTemplate動態地生成縮略圖可以看出。通過從json文件獲取信息的ajax請求填充thumbumbs。比較引導縮略圖中的舊價格和新價格？

我的任務是把目前的價格比較縮略圖VS在JSON更新的價格（如果這樣），如果新的價格比舊更高的顯示在縮略圖一個綠色箭頭。如果新價格低於舊價格，我必須顯示紅色箭頭。

我的問題是我不能真正到達這一點，因爲我不知道如何保存舊價格，然後將它與每個縮略圖的新價格進行比較。

由於每個縮略圖都有一個唯一的ID在我寫這段代碼通過縮略圖的ID的獲取從DOM價格：

var sPriceInDom = Number($("#product-id-"+sProductId+" .product-price").text());

但是，當然，這給了我最後的價格和我無法真正與舊價格進行比較，因爲它被新價格取代。

如果我把這個代碼Ajax請求之後，那麼它給了我只是零，因爲縮略圖是動態生成的，它必須首先填充。

有沒有人有一個想法，我怎麼能保留舊的價格，將其比作最後更新的人，所以我可以計算出不同？

這裏是所有neccesary代碼：

var sProductTemplate = '<div class="col-sm-6 col-md-3"> \ 
           <div class="thumbnail"> \ 
           <div id="product-id-{{product-id}}" class="product"> \ 
            <img class="imgProduct" src="{{product-icon}}" alt="idiot forgot icon"> \ 
            <div class="caption"> \ 
            <h3>{{product-name}}</h3> \ 
            <div class="product-price">{{product-price}}</div> \ 
            <i {{arrow-updown}}></i> \ 
            </div> \ 
           </div> \ 
           </div>'; 
getProducts(); 
function getProducts() { 
    $.ajax({ 
      "url":'get-products.php', 
      "method":"get", 
      "dataType":"text", 
      "cache":false 
     }).done(function(jData){ 
      var jProducts=JSON.parse(jData); 

     jProducts.forEach(function(jProduct){ 
      var sProductId = jProduct.id; 
      var sProductName = jProduct.name; 
      var sProductBrand = jProduct.brand; 
      var sProductPrice = jProduct.price; 
      lastPrice = sProductPrice; 
      var sPriceInDom = Number($("#product-id-"+sProductId+" .product-price").text()); 
      console.log(sPriceInDom + " DOM"); 

      var arrowUP ='class="fa fa-arrow-up" aria-hidden="true"'; 
      var arrowDOWN ='class="fa fa-arrow-down" aria-hidden="true"'; 

       var sTempProduct = sProductTemplate; 
       sTempProduct = sTempProduct.replace("{{product-id}}", sProductId); 
       sTempProduct = sTempProduct.replace("{{product-icon}}", "http://image.flaticon.com/teams/1-freepik.jpg"); 
       sTempProduct = sTempProduct.replace("{{product-name}}", sProductBrand); 
       sTempProduct = sTempProduct.replace("{{product-price}}", sProductPrice); 

       sTempProduct = sTempProduct.replace("{{arrow-updown}}",arrowUP); 
       $("#lblDisplayProducts").append(sTempProduct); 

      }) 

     }); 
    }

來源

2016-10-01 Robert Ross