Multiply a price in a class, with the contents of another class, and a currency rate

Question

I have the following row formats in a HTML page that converts prices from dollars to pounds or euros.

<tr>
    <td class="sr-price">
    <span class="sr-price-symbol">£</span>
    <span class="sr-price-value">43.33</span>
    <span class="sr-price-orig">72.85</span>
    </td>
</tr>
<tr>
    <td class="sr-price">
    <span class="sr-price-symbol">£</span>
    <span class="sr-price-value">46.99</span>
    <span class="sr-price-orig">79.00</span>
    </td>
</tr>

Using jQuery, I need to change the contents of the class "sr-price-value", using the contents of "sr-price-orig" as a multiplier, with another value, for example 0.59 (dollar to pound rate).

I'm currently using the following code, but the problem is it uses the "sr-price-value" number for the calculation, and thus the end result is that the number keeps reducing every time, if the user keeps switching between pounds and euros.

$('.sr-price-value').text(function(i,v) {
    return (v * 0.59).toFixed(2);
});

How do I do the calculation using the "sr-price-orig" value so that the user can convert back and forth each time, with no loss of value?

Answer 1

Instead of using v in your function (that represent the old value of the element for which you are setting the text), you should use the value of .sr-price-orig.

You can get it like this:

// Get the value of the next DOM element converted to float
originalValue = parseFloat($(this).next().text());
return (originalValue * 0.59).toFixed(2);