2016-09-01 2 views
-3

У меня есть много div с классом .price (каждый из них показывает другую цену), и у меня есть коэффициент умножения. Когда пользователь выбирает радио с определенным размером, я хочу автоматически изменить все цены.Mutiplying значение в div с тем же классом - JQuery

Я попытался следующий код, но он меняется для умножения первого .price ребенка (Все .price получает ту же цену):

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

Как я могу mutiply значение по отдельности?

+2

Пожалуйста, ваши HTML для нас, чтобы мы могли понять, правильно, что вы пытаетесь делать. – bipen

+0

Оригинальный код: http://danielgroppo.com/projetaqui/budget.php - Я не публиковал весь код, потому что js генерирует «радиообъекты». Цель - обновить цены во втором разделе страницы при выборе опции (радиоблока). Каждый радиатор имеет коэффициент, который умножает все цены. я отлично сделал последний ответ, но он показывает обновленную цену первого ребенка (попробуйте в примере). –

ответ

1

Я предположил, что HTML основан на вашем описании в вопросе, пожалуйста, попробуйте.

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>

0
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="Scripts/jquery-3.1.0.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('input:radio[class=radio-button]').change(function() { 
      var factor = $(this).val(); 
      alert(factor); 
      $.each($('.test'), function (index, value) { 
       alert($(this).html()); 
       alert($(this).data('test-value')); 
       $(this).html('$' + (parseFloat($(this).data('test-value')) * factor)); 
      }); 
     }); 

     $('input:radio').prop('checked', false); 

    }); 
</script> 

Вот мой HTML код ..

<input type="radio" value="5" class="radio-button" id="rd1" />first(5) 
<input type="radio" value="15" class="radio-button" id="rd1" />first(15) 
<br /> 
<div class="test" data-test-value="11.8"></div> 
<div class="test" data-test-value="11.8"></div> 
<div class="test" data-test-value="1.8"></div> 
<div class="test" data-test-value="11.8"></div> 
<div class="test" data-test-value="9.8"></div> 
<div class="test" data-test-value="11.8"></div> 
<div class="test" data-test-value="5.5"></div> 
<div class="test" data-test-value="4.8"></div> 
+0

добросердечно игнорируйте предупреждение() б/у для тест только .. –

Смежные вопросы