This is the example - but the problem is that it stops at the product which does not have sale price, say "I Love London Mini Frame Purse" for $135. It will continue to find class item but will stop at the product which has only one actual price (no sale price). Why is that? Can't it continue finding class item and calculate accordingly till the end of the page ignoring the products with actual price only?
function calculate(sale, original) {
percentDiscount = Math.round(eval((sale / original) * 100));
return percentDiscount;
}
$(document).ready(function() {
var salecost;
var originalcost;
var percent;
$('.item').each(function() {
salecost = $(this).find('.saleprice').html();
salecost = salecost.replace(/[^\d\.]/g, "");
originalcost = $(this).find('.actualprice').html();
originalcost = originalcost.replace(/[^\d\.]/g, "");
percentDiscount = calculate(salecost, originalcost);
if (percentDi开发者_开发技巧scount > 30) {
$(this).find("#percentoff").html((percentDiscount) + '%');
$(this).find("#percentoff").addClass('badge30');
}
if (percentDiscount > 50) {
$(this).find("#percentoff").html((percentDiscount) + '%');
$(this).find("#percentoff").addClass('badge50');
}
if (percentDiscount > 70) {
$(this).find("#percentoff").html((percentDiscount) + '%');
$(this).find("#percentoff").addClass('badge70');
}
});
});
Edit One question if 0 and 30 = green color if 30 and 50 = brown color if 50 and 70 = yellow color if 70 and 100 = red color
would it be this:
if (50> percentDiscount > 70) {
$(this).find("#percentoff").html((percentDiscount) + '%');
$(this).find("#percentoff").addClass('badge70');
}
EDIT II ANother question:
how to have price in html to be appended to div percentoff?
$(this).find("#percentoff").append.html((percentDiscount) + '%');
That is strange that it stops midway through the page, but perhaps you could just use an if statement?
i.e., change
salecost = $(this).find('.saleprice').html()
to
if (salecost = $(this).find('.saleprice').html()) {
(with a closing bracket, of course)
精彩评论