javascript - 将控制台日志结果打印到一个 div 类的多个实例

Question

这是我大约一个月前提出的问题的第 2 部分。当时，我需要一个脚本来遍历电子商务网页上的所有产品，并计算控制台日志的节省百分比。

虽然这已经实现，但当我尝试将值分配给 HTML 中的 div 时似乎出现了问题。

我用于百分比折扣计算的算法如下所示:

//Calculate savings per item
function getPrice(elem){
  return elem.match(/\d+.\d{0}/);
}

function getDiscount(regPrice, salePrice){
  let disc = (regPrice - salePrice) * 100 / regPrice;
  return disc < 0 ? 0 : disc;
}

let $regPrice = $('.regular-price');
let $salePrice = $('.sale-price');

$regPrice.each(function(k, v){
  let regPrice = getPrice($regPrice[k].innerHTML);
  let salePrice = getPrice($salePrice[k].innerHTML);
  let discount = getDiscount(regPrice, salePrice);

  console.log("You Save: " + discount.toFixed(0) + "%");
});

这在很大程度上完全符合我的要求，但是从控制台日志获取这些值到 html div 类似乎只是想获取第一个值并全面使用它。

例如，当我挂接控制台覆盖或任何类型的 HTML 输出时，DOM 获取控制台日志项数组中的第一个值，并为页面上的每个项目重新使用相同的值:

if (typeof console  != "undefined") 
if (typeof console.log != 'undefined')
    console.olog = console.log;
else
    console.olog = function() {};

console.log = function(message) {
console.olog(message);
$('.youSave').append("You Save: " + discount.toFixed(0) + "%");
};
console.error = console.debug = console.info =  console.log

控制台显示如下:

DOM 仅获取第一个值，然后在页面上的所有项目中重复该值。

我希望每个 div 类都显示确切的节省百分比，同时默默地丢弃“NaN”或 0% 结果。基本上任何大于 1 的值都应该显示。

产品页面上的 HTML 输出结构如下:

<div class="col-xs-12 col-sm-6 col-md-3 product-grid-item">
  <div class="panel panel-default">
    <div class="panel-body text-center shadow" style="height: 341.2px;">
        <a href="/link1.aspx" class="grid-product-link">
          <div class="grid-item-image-wrap">
                <img src="ae00-3487.jpg" alt="alt-text-here" class="grid-item-image product-image center-block">
            </div>
            <div class="grid-item-name-wrap">Product 1 (over 1k)</div>
        </a>
    </div>
    <div class="panel-footer text-center">
        <div class="grid-item-price-wrap">
            <a href="link1.aspx" class="price-button">
                <div class="price-wrap">
                    <div class="price regular-price">
                        <span>Retail Price:</span> 
                        $2,249.00
                    </div>
                    <div class="price sale-price alert alert-green shadow">
                        <span>Our Price:</span>
                        $1,759.00
                    </div>
                    <div class="youSave text-uppercase text-success"></div> 
                    <meta itemprop="price" content="1759.0000">
                    <meta itemprop="priceCurrency" content="USD">
                </div>
            </a>
        </div>
    </div>
    <div class="grid-item-promotions-wrap"></div>
  </div>
 </div>
 <div class="col-xs-12 col-sm-6 col-md-3 product-grid-item">
    <div class="panel panel-default">
      <div class="panel-body text-center shadow" style="height: 341.2px;">
          <a href="link2.aspx" class="grid-product-link">
              <div class="grid-item-image-wrap">
                  <img src="ae00-1856.jpg" alt="alt-text-here" class="grid-item-image product-image center-block">
              </div>
              <div class="grid-item-name-wrap">Product 2 (under 1k)</div>
          </a>
      </div>
      <div class="panel-footer text-center">
        <div class="grid-item-price-wrap">
            <a href="link2.aspx" class="price-button">
                <div class="price-wrap">
                    <div class="price regular-price">
                        <span>Retail Price:</span> 
                        $559.00
                    </div>
                    <div class="price sale-price alert alert-green shadow">
                        <span>Our Price:</span> 
                        $439.00
                    </div>
                    <div class="youSave text-uppercase text-success">You Save: 21%</div> 
                    <meta itemprop="price" content="439.0000">
                    <meta itemprop="priceCurrency" content="USD">
                </div>
            </a>
        </div>
      </div>
      <div class="grid-item-promotions-wrap"></div>
     </div>
    </div>

并在页面上的所有产品中遵循此架构。我在页面中放置了“youSave”的自关闭 div 类，这是我想显示来自控制台日志的结果的地方。

工作示例: https://jsfiddle.net/tzhben/sLb16nhg/2/

Answer 1

稍微调整了您的代码。如果你迭代父 div .price-wrap 会更好。

//Calculate savings per item
function getPrice(elem){
  return elem.match(/\d+.\d{0}/);
}

function getDiscount(regPrice, salePrice){
  let disc = (regPrice - salePrice) * 100 / regPrice;
  return disc < 0 ? 0 : disc;
}

let $priceWrap = $('.price-wrap');
$priceWrap.each(function(k, v){
  let $regPrice = $priceWrap[k].children[0];
  let $salePrice = $priceWrap[k].children[1];
  let $discountPrice = $priceWrap[k].children[2];

  let regPrice = getPrice($regPrice.innerHTML);
  let salePrice = getPrice($salePrice.innerHTML);
  let discount = getDiscount(regPrice, salePrice);

  if ( !isNaN(discount) && discount !== 0 ){
    $discountPrice.innerHTML = discount.toFixed(0) + "%";
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="price-wrap">
    <div class="price regular-price">
      <span>Retail Price:</span>
      $549.00
    </div>
    <div class="price sale-price">
      <span>Our Price:</span>
      $489.00
    </div>
   <div class="youSave"></div>
 </div>
 <div class="price-wrap">
    <div class="price regular-price">
       <span>Retail Price:</span>
       $2599.00
    </div>
    <div class="price sale-price">
      <span>Our Price:</span>
      $2255.00
    </div>
   <div class="youSave"></div>
 </div>
 <div class="price-wrap">
    <div class="price regular-price">
       <span>Retail Price:</span>
       $299.00
    </div>
    <div class="price sale-price">
      <span>Our Price:</span>
      $155.00
    </div>
   <div class="youSave"></div>
 </div>
 <div class="price-wrap">
    <div class="price regular-price">
       <span>Retail Price:</span>
       $699.00
    </div>
    <div class="price sale-price">
      <span>Our Price:</span>
      $555.00
    </div>
   <div class="youSave"></div>
 </div>
 <div class="price-wrap">
    <div class="price regular-price">
       <span>Retail Price:</span>
       $0.00
    </div>
    <div class="price sale-price">
      <span>Our Price:</span>
      $155.00
    </div>
   <div class="youSave"></div>
 </div>