计算产品列表页面上多个产品的百分比折扣
Calculate percentage discount of multiple products on a product listing page
您好,我正在尝试计算产品列表页面上有过去价格和现在价格的在售产品的百分比折扣。
我已经获得了用于获取百分比折扣的代码,但我似乎无法让它针对每个产品动态工作。目前它将 运行 计算然后打印每个产品的相同百分比折扣,甚至对于全价产品也是如此。
如有任何帮助,我们将不胜感激。谢谢!
setTimeout(function discountPrice() {
$('.product-slab__price').each(function() {
var pattern = /[^0-9\.]/g;
var wasPrice = parseFloat($(".product-price__primary .product-price__was").text().replace(pattern, "")) / 100;
var newPrice = parseFloat($(".product-price__primary .product-price__value--discounted").text().replace(pattern, "") / 100);
var subtractPrice = (Math.abs(wasPrice - newPrice));
var dividePrice = (Math.abs(subtractPrice / wasPrice));
var multiplyPrice = (Math.abs(dividePrice * 100));
$('.discountPercentage').html(multiplyPrice.toFixed(0) + "%");
});
}, 500);
.product-price__was {
text-decoration: line-through;
}
.product-price__value.product-price__value--discounted {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-slab__price">
<div class="product-price__primary">
<span class="product-price__was">Was €10,00</span>
<span class="product-price__value product-price__value--discounted">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__value product-price__value--discounted">€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>
你需要
- 使用
,this
留在当前slab的范围内
- 测试 multiplyPrice 是一个数字
- 移动正则表达式,因为您不需要每次都创建它
不需要
- 通过您显示的代码中的 .product-price__primary
- parseFloat 因为你没有在任何地方添加。如果确实需要添加
,可以使用一元加法 +wasPrice
const pattern = /[^0-9\.]/g,
discountPrice = function() {
$('.product-slab__price').each(function() {
const wasPrice = $(".product-price__was", this).text().replace(pattern, "") / 100,
newPrice = $(".product-price__value--discounted", this).text().replace(pattern, "") / 100,
subtractPrice = Math.abs(wasPrice - newPrice),
dividePrice = Math.abs(subtractPrice / wasPrice),
multiplyPrice = Math.abs(dividePrice * 100);
if (!isNaN(multiplyPrice)) $('.discountPercentage', this).html(multiplyPrice.toFixed(0) + "%");
});
};
setTimeout(discountPrice, 500);
.product-price__was {
text-decoration: line-through;
}
.product-price__value.product-price__value--discounted {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-slab__price">
<div class="product-price__primary">
<span class="product-price__was">Was €10,00</span>
<span class="product-price__value product-price__value--discounted">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__value product-price__value--discounted">€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>
问题是因为您在遍历循环时选择 所有 DOM 中的元素和那些 类。
相反,您需要将那些 类 与迭代中的当前 .product-slab__price
相关的元素作为目标。为此,请使用 this
关键字和 find()
方法:
setTimeout(function discountPrice() {
var pattern = /[^0-9\.]/g;
$('.product-slab__price:has(.product-price__value--discounted)').each(function() {
let $slab = $(this);
var wasPrice = parseFloat($slab.find(".product-price__primary .product-price__was").text().replace(pattern, "")) / 100;
var newPrice = parseFloat($slab.find(".product-price__primary .product-price__value--discounted").text().replace(pattern, "") / 100);
var subtractPrice = Math.abs(wasPrice - newPrice);
var dividePrice = Math.abs(subtractPrice / wasPrice);
var multiplyPrice = Math.abs(dividePrice * 100);
$slab.find('.discountPercentage').html(multiplyPrice.toFixed(0) + "%");
});
}, 500);
.product-price__was {
text-decoration: line-through;
}
.product-price__value.product-price__value--discounted {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-slab__price">
<div class="product-price__primary">
<span class="product-price__was">Was €10,00</span>
<span class="product-price__value product-price__value--discounted">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__value product-price__value--discounted">€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>
请注意,由于正则表达式内容是静态的,因此可以在循环外定义。
您好,我正在尝试计算产品列表页面上有过去价格和现在价格的在售产品的百分比折扣。
我已经获得了用于获取百分比折扣的代码,但我似乎无法让它针对每个产品动态工作。目前它将 运行 计算然后打印每个产品的相同百分比折扣,甚至对于全价产品也是如此。
如有任何帮助,我们将不胜感激。谢谢!
setTimeout(function discountPrice() {
$('.product-slab__price').each(function() {
var pattern = /[^0-9\.]/g;
var wasPrice = parseFloat($(".product-price__primary .product-price__was").text().replace(pattern, "")) / 100;
var newPrice = parseFloat($(".product-price__primary .product-price__value--discounted").text().replace(pattern, "") / 100);
var subtractPrice = (Math.abs(wasPrice - newPrice));
var dividePrice = (Math.abs(subtractPrice / wasPrice));
var multiplyPrice = (Math.abs(dividePrice * 100));
$('.discountPercentage').html(multiplyPrice.toFixed(0) + "%");
});
}, 500);
.product-price__was {
text-decoration: line-through;
}
.product-price__value.product-price__value--discounted {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-slab__price">
<div class="product-price__primary">
<span class="product-price__was">Was €10,00</span>
<span class="product-price__value product-price__value--discounted">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__value product-price__value--discounted">€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>
你需要
- 使用
,this
留在当前slab的范围内 - 测试 multiplyPrice 是一个数字
- 移动正则表达式,因为您不需要每次都创建它
不需要
- 通过您显示的代码中的 .product-price__primary
- parseFloat 因为你没有在任何地方添加。如果确实需要添加 ,可以使用一元加法
+wasPrice
const pattern = /[^0-9\.]/g,
discountPrice = function() {
$('.product-slab__price').each(function() {
const wasPrice = $(".product-price__was", this).text().replace(pattern, "") / 100,
newPrice = $(".product-price__value--discounted", this).text().replace(pattern, "") / 100,
subtractPrice = Math.abs(wasPrice - newPrice),
dividePrice = Math.abs(subtractPrice / wasPrice),
multiplyPrice = Math.abs(dividePrice * 100);
if (!isNaN(multiplyPrice)) $('.discountPercentage', this).html(multiplyPrice.toFixed(0) + "%");
});
};
setTimeout(discountPrice, 500);
.product-price__was {
text-decoration: line-through;
}
.product-price__value.product-price__value--discounted {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-slab__price">
<div class="product-price__primary">
<span class="product-price__was">Was €10,00</span>
<span class="product-price__value product-price__value--discounted">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__value product-price__value--discounted">€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>
问题是因为您在遍历循环时选择 所有 DOM 中的元素和那些 类。
相反,您需要将那些 类 与迭代中的当前 .product-slab__price
相关的元素作为目标。为此,请使用 this
关键字和 find()
方法:
setTimeout(function discountPrice() {
var pattern = /[^0-9\.]/g;
$('.product-slab__price:has(.product-price__value--discounted)').each(function() {
let $slab = $(this);
var wasPrice = parseFloat($slab.find(".product-price__primary .product-price__was").text().replace(pattern, "")) / 100;
var newPrice = parseFloat($slab.find(".product-price__primary .product-price__value--discounted").text().replace(pattern, "") / 100);
var subtractPrice = Math.abs(wasPrice - newPrice);
var dividePrice = Math.abs(subtractPrice / wasPrice);
var multiplyPrice = Math.abs(dividePrice * 100);
$slab.find('.discountPercentage').html(multiplyPrice.toFixed(0) + "%");
});
}, 500);
.product-price__was {
text-decoration: line-through;
}
.product-price__value.product-price__value--discounted {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-slab__price">
<div class="product-price__primary">
<span class="product-price__was">Was €10,00</span>
<span class="product-price__value product-price__value--discounted">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__value product-price__value--discounted">€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>
请注意,由于正则表达式内容是静态的,因此可以在循环外定义。