Question

I need to create a piece of script that looks through a variety of products on a page, works out the percentage off using the ‘was’ and ‘now’ prices and then display an image for that product that represents the percentage off.

So far I can loop through all the products and run the percentage script to display an image but the same image is shown on all products instead of different images for different percentages. Does anyone know how I can make the percentage script run for each product and not duplicate?

Here’s some dummy HTML:

<div id="prods">
<div id="discountWasPrice" style="display:none;">50</div>
<div id="discountSellPrice" style="display:none;">25</div>
<div id="discount50"></div>
</div>

<div id="prods">
<div id="discountWasPrice" style="display:none;">75</div>
<div id="discountSellPrice" style="display:none;">25</div>
<div id="discount50"></div>
</div>

<div id="prods">
<div id="discountWasPrice" style="display:none;">10</div>
<div id="discountSellPrice" style="display:none;">8</div>
<div id="discount50"></div>
</div>

And here’s the javascript so far:

<script type="text/javascript">
var discount = $("div#discount50");
var prods = $("div#prods");
var discountLen = $("div#prods").length;
for(var i = 0; i < discountLen; i++){
var x = $('#discountWasPrice').text();
var f = $('#discountSellPrice').text();
var g = 1-(f/x);
percent= (g * 100).toFixed(2);
if ((percent > 4.00) && (percent < 10.00)) {
    discount[i].innerHTML+="<a href=\"\"><img src=\"5percent.png\"></a>";}
if ((percent > 9.00) && (percent < 15.00)) {
discount[i].innerHTML+="<a href=\"\"><img src=\"10percent.png\"></a>";}
if ((percent > 14.00) && (percent < 20.00)) {
discount[i].innerHTML+="<a href=\"\"><img src=\"15percent.png\"></a>";}
if ((percent > 19.00) && (percent < 25.00)) {
discount[i].innerHTML+="<a href=\"\"><img src=\"20percent.png\"></a>";}
if ((percent > 24.00) && (percent < 30.00)) {
discount[i].innerHTML+="<a href=\"\"><img src=\"25percent.png\"></a>";}
if ((percent > 29.00) && (percent < 35.00)) {
discount[i].innerHTML+="<a href=\"\"><img src=\"30percent.png\"></a>";}
if ((percent > 34.00) && (percent < 40.00)) {
discount[i].innerHTML+="<a href=\"\"><img src=\"35percent.png\"></a>";}
if ((percent > 39.00) && (percent < 45.00)) {
discount[i].innerHTML+="<a href=\"\"><img src=\"40percent.png\"></a>";}
if ((percent > 44.00) && (percent < 50.00)) {
discount[i].innerHTML+="<a href=\"\"><img src=\"45percent.png\"></a>";}
if ((percent > 49.00) && (percent < 60.00)) {
discount[i].innerHTML+="<a href=\"\"><img src=\"50percent.png\"></a>";}
if ((percent > 59.00) && (percent < 70.00)) {
discount[i].innerHTML+="<a href=\"\"><img src=\"60percent.png\"></a>";}
if ((percent > 69.00) && (percent < 75.00)) {
discount[i].innerHTML+="<a href=\"\"><img src=\"70percent.png\"></a>";}
if (percent > 74.00) {
discount[i].innerHTML+="<a href=\"\"><img src=\"70percentplus.png\"></a>";}
}
</script>

Any help is much appreciated,

Thanks

Answer 1

Move your “id” to “class” for every div, then get some jquery magic to loop on all your divs…