使用jquery添加和乘以值

Question

我有2个产品，想要与数量相乘，并将价格与税收相加，并显示我尝试使用jQuery添加和相乘的值的最终价格，但我无法相乘并将两个值相加可以任何人帮助我

以下是代码：

$(document).ready(function(){ 
	$('#sticker01').on('keyup', function() {
		var sticker_01 = $('#sticker01').val();
		var oldval = parseInt($('#order_total').text());
		
		var total_val = (sticker_01 * 8 +1.30)  +  oldval;
		$('#order_total').html(total_val);
	});
});

$(document).ready(function(){ 
	$('#sticker02').on('keyup', function() {
		var sticker_02 = $('#sticker02').val();
		var oldval = parseInt($('#order_total').text());
		
		var total_val = (sticker_02 * 2 + 1.30)  +  oldval;
		$('#order_total').html(total_val);
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="form-group">
  <label>MadEnoughToPayAttention Bumper Sticker</label>
  <input type="number" name="bumper_sticker_01_qty" id="sticker01">
</div>

<div class="form-group">
  <label>ChangeNotHope Bumper Sticker</label>
  <input type="number" name="bumper_sticker_02_qty" id="sticker02">
</div>

<div class="order_total">
  <span>Order Total : $<div id="order_total">0.00</div></span>
</div>

Answer 1

对于 HTML 的微小更改以及 Javascript <的完整大修，您的问题解决方案不那么详细/ strong>即可。

HTML：

我添加了 min 属性，并将其值设置为 0 ，以防止输入微调器在两者中选择负值 sticker01 和 sticker02 元素。我还将 order_total 输入设置为 disabled ，因为这是计算字段，它将从内联 Javascript 中获取其值。这些udpates是美化的，并且在 app 的结构性能方面没有任何影响。

<div class="form-group">
  <label>MadEnoughToPayAttention Bumper Sticker</label>
  <input type="number" name="bumper_sticker_01_qty" min="0" id="sticker01">
</div>

<div class="form-group">
  <label>ChangeNotHope Bumper Sticker</label>
  <input type="number" name="bumper_sticker_02_qty" min="0" id="sticker02">
</div>

<div class="order_total">
  <span>Order Total : $
    <input type="text" name="bumper_sticker_total" id="order_total" disabled>
  </span>
</div>

<强>使用Javascript：

在这里，您可以实现一个匿名函数来处理事件 .keyup() 和 .change() ，并在输入元素上使用委托事件。< / p>

$('input').on('change keyup', function() {
  sticker_01 = $('#sticker01').val(),
  sticker_02 = $('#sticker02').val(),
  total_val = $('#order_total');

  if ((sticker_01) > 0 && (sticker_02) == 0) {
    total_val.val(((sticker_01) * 8 + 1.30).toFixed(2));
  } else if ((sticker_02) > 0 && (sticker_01) == 0) {
    total_val.val(((sticker_02) * 2 + 1.30).toFixed(2));
  } else if ((sticker_01) > 0 && (sticker_02) > 0) {
    total_val.val(((((sticker_01) * 8 + 1.30) + ((sticker_02) * 2 + 1.30)).toFixed(2)));
  } else {
    total_val.val('');
  };
});

这就是你需要的一切。以下是一个示例代码段供您查看。

$('input').on('change keyup', function() {
  sticker_01 = $('#sticker01').val(),
    sticker_02 = $('#sticker02').val(),
    total_val = $('#order_total');

  if ((sticker_01) > 0 && (sticker_02) == 0) {
    total_val.val(((sticker_01) * 8 + 1.30).toFixed(2));
  } else if ((sticker_02) > 0 && (sticker_01) == 0) {
    total_val.val(((sticker_02) * 2 + 1.30).toFixed(2));
  } else if ((sticker_01) > 0 && (sticker_02) > 0) {
    total_val.val(((((sticker_01) * 8 + 1.30) + ((sticker_02) * 2 + 1.30)).toFixed(2)));
  } else {
    total_val.val('');
  };
});

<div class="form-group">
  <label>MadEnoughToPayAttention Bumper Sticker</label>
  <input type="number" name="bumper_sticker_01_qty" min="0" id="sticker01">
</div>

<div class="form-group">
  <label>ChangeNotHope Bumper Sticker</label>
  <input type="number" name="bumper_sticker_02_qty" min="0" id="sticker02">
</div>

<div class="order_total">
  <span>Order Total : $
    <input type="text" name="bumper_sticker_total" id="order_total" disabled>
  </span>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>