Question

这是我一个月前提出的问题的第二部分。那时，我需要一个脚本来循环浏览电子商务网页上的所有产品，并计算出节省到控制台日志的百分比。

虽然已经实现，但是当我尝试将值分配给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>

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

工作示例： 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>

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

1 个答案: