这是我大约一个月前提出的问题的第 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 类，这是我想显示来自控制台日志的结果的地方。
最佳答案
稍微调整了您的代码。如果你迭代父 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>关于javascript - 将控制台日志结果打印到一个 div 类的多个实例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55986005/