Daniel Groppo Daniel Groppo - 3 months ago 10
HTML Question

Mutiplying value in div with same class - JQuery

I have many div with the class .price (each one showing a different price) and I have a multiplying factor. When the user choose a radio with determined size, I want to automatically mutiply all prices.

I tried the following code, but it is changing for the multiplication of first .price child (All .price is receiving the same price):

$('.price').each(function(){
$(this).html(parseFloat($(this).data('base-price'))*factor);
});


How I can mutiply the value individually?

Answer

I've assumed the HTML based on your description in the question, Please try.

var factor = 0.5;
changePrice();  
$("input[name='selectRadio']").change(function(){
  factor = $(this).val();
  changePrice();  
});
function changePrice(){
$('.price').each(function() {
    $(this).html('$' + (parseFloat($(this).data('base-price')) * factor).toFixed(2));
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="radio" value="10" class="selectRadio" name="selectRadio"/>10
<input type="radio" value="20" class="selectRadio" name="selectRadio"/>20

<ul>
  <li class="price" data-base-price="1.00"></li>
  <li class="price" data-base-price="2.00"></li>
  <li class="price" data-base-price="3.00"></li>
  <li class="price" data-base-price="4.00"></li>
  <li class="price" data-base-price="5.00"></li>
  <li class="price" data-base-price="6.00"></li>
  <li class="price" data-base-price="7.00"></li>
  <li class="price" data-base-price="8.00"></li>
  <li class="price" data-base-price="9.00"></li>
</ul>