Question

从下面的代码可以看出，我使用var sProductTemplate中的模板动态生成缩略图。 thhumbnails通过ajax请求填充，该请求从json文件获取信息。

我的任务是比较缩略图中的当前价格与json中的更新价格（如果是这样），如果新价格高于旧价格，则在缩略图中显示绿色箭头。如果新价格低于旧价格，那么我必须显示一个红色箭头。

我的问题是我无法达到这一点，因为我无法弄清楚如何保存旧价格，然后将其与每个缩略图的新价格进行比较。

由于每个缩略图都有一个唯一的ID，因此我已经编写了此代码，以便通过缩略图的ID来获取dom的价格：

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

但是，当然，这给了我最后的价格，我无法将它与旧价格进行比较，因为它被新价格所取代。

如果我在ajax请求之后立即放置此代码，那么它只给我零，因为缩略图是动态生成的，必须先填充它。

有没有人知道如何保留旧价格并将其与最后更新的价格进行比较，以便我可以计算差价？

以下是所有必要的代码：

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);

            })

        });
  }

Answer 1

此问题说明了为什么DOM不应该用于存储数据的另一个重要原因（请参阅讨论here）。可以将DOM视为反映数据当前状态的一种方式，而不是数据存储本身。

最好将数据存储在某种Javascript对象中，然后您可以更轻松地比较之前和传入的值。 KnockoutJS框架是本地存储对象的一个很好的例子，它具有从Javascript数据到DOM的动态数据绑定。 AngularJS提供了类似的关注点分离。

总的来说，最好遵循MVC模式，其中数据模型不存储＆＃34;作为DOM的一部分。

比较bootstrap缩略图中的新旧价格？

1 个答案: