Question

我有很多div与类.price（每个显示不同的价格），我有一个乘法因素。当用户选择具有确定大小的无线电时，我想自动乘以所有价格。

我尝试了以下代码，但它正在改变第一个.price child的乘法（所有.price都收到相同的价格）：

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

如何单独乘以该值？

Answer 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>

Answer 2

<!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>

将div中的值乘以相同的类--JQuery

2 个答案: