javascript - 在 Vanilla JS 中计算产品的折扣百分比
问题描述
嗨,我要做的是计算使用 Vanilla JS 销售的产品的百分比折扣。因此,如果存在销售价格“.product-price__discount”,那么我想计算出该产品的折扣百分比。
到目前为止,我能够计算出第一个产品的折扣。在第二个产品上,它似乎打印了与第一个产品相同的折扣,最后一个产品没有销售,因此忽略这一点是正确的。我也知道 .length 有错误,但不知道如何解决。
var pattern = /[^0-9\.]/g;
var price = document.querySelectorAll('.product-slab__price');
price.forEach(function(el){
if(!el.querySelector('.product-price__discount').length) {
var wasPrice = parseFloat(document.querySelector('.product-price__was').textContent.replace(pattern, "")) / 100;
var newPrice = parseFloat(document.querySelector('.product-price__discount').textContent.replace(pattern, "")) / 100;
var subtractPrice = (wasPrice - newPrice);
var dividePrice = (subtractPrice / wasPrice);
var multiplyPrice = (dividePrice * 100);
el.querySelector('.discountPercentage').innerHTML = multiplyPrice.toFixed(0) + "%";
}
});
.product-price__was {
text-decoration: line-through;
}
.product-price__discount {
color: red;
}
<div class="product-slab__price">
<div class="product-price__primary">
<span class="product-price__was">Was €10,00</span>
<span class="product-price__discount">Now €8,00</span>
<span class="discountPercentage" > </span>
</div>
</div>
<div class="product-slab__price">
<div class="product-price__primary">
<span class="product-price__was">€15,00</span>
<span class="product-price__discount">€10,00</span>
<span class="discountPercentage" > </span>
</div>
</div>
<div class="product-slab__price">
<div class="product-price__primary">
<span class="product-price__value">€15,90</span>
<span class="discountPercentage" > </span>
</div>
</div>
解决方案
问题可以在这里找到;
var wasPrice = parseFloat(document.querySelector('.product-price__was').textContent.replace(pattern, "")) / 100;
var newPrice = parseFloat(document.querySelector('.product-price__discount').textContent.replace(pattern, "")) / 100;
您正在使用document.querySelector
,但是,您将需要likeel
提供的元素forEach
:
var wasPrice = parseFloat(el.querySelector('.product-price__was').textContent.replace(pattern, "")) / 100;
var newPrice = parseFloat(el.querySelector('.product-price__discount').textContent.replace(pattern, "")) / 100;
此外,为防止出现length
错误,请querySelector
通过检查null
而不是 off来检查是否发现任何内容.length
:
if (el.querySelector('.product-price__discount') !== null) {
看看这个改进的例子:
var pattern = /[^0-9\.]/g;
var price = document.querySelectorAll('.product-slab__price');
price.forEach(function(el){
if (el.querySelector('.product-price__discount') !== null) {
var wasPrice = parseFloat(el.querySelector('.product-price__was').textContent.replace(pattern, "")) / 100;
var newPrice = parseFloat(el.querySelector('.product-price__discount').textContent.replace(pattern, "")) / 100;
var discount = 100 - (newPrice / wasPrice) * 100;
el.querySelector('.discountPercentage').innerHTML = discount.toFixed(0) + "%";
}
});
.product-price__was {
text-decoration: line-through;
}
.product-price__discount {
color: red;
}
<div class="product-slab__price">
<div class="product-price__primary">
<span class="product-price__was">Was €10,00</span>
<span class="product-price__discount">Now €8,00</span>
<span class="discountPercentage" > </span>
</div>
</div>
<div class="product-slab__price">
<div class="product-price__primary">
<span class="product-price__was">€15,00</span>
<span class="product-price__discount">€10,00</span>
<span class="discountPercentage" > </span>
</div>
</div>
<div class="product-slab__price">
<div class="product-price__primary">
<span class="product-price__value">€15,90</span>
<span class="discountPercentage" > </span>
</div>
</div>
推荐阅读
- php - 如果请求来自同一浏览器,如何识别浏览器请求?
- shell - 如何始终获取使用 shell 下载 tomcat 服务器的最新链接
- jquery - 从样式标签中获取 css 类列表
- python - Select a specific value in a group using python pandas
- kubernetes - 具有静态工作分配的并行静态作业
- javascript - 通过 formData xhr 请求发布数据后无法访问文件数组
- android - 在我的 android 应用程序中创建一个日历
- odoo - More practical way to add my code to original method
- java - NoSuchBeanDefinitionException for a repository in a library
- jspdf-autotable - 如何使用 jspdf 在一列内包含 3 列?