javascript - jQuery/JS 表单问题

Question

我有一个 HTML 表单，需要使用 jQuery(或 JavaScript)添加和删除数据的帮助。

$('.purchase-car').on('click', 'button', function(event) {
  event.preventDefault();
  /* Act on the event */
  var carName = $('.purchase-car select').val();
  var carPrice = $('.purchase-car select').find(':selected').data('price');
  var carQuantity = $('.purchase-car input[name="quantity"]').val();
  var totalPrice = carPrice * carQuantity;

  var orderToAdd = '<li>' + '<span>' + carName + ' (' + carQuantity + ')</span> <span>remove</span>' + '</li>';

  $('ul').prepend(orderToAdd);

  $('#payment-amount').html(total);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>volvo (1) <span>remove</span>

  </li>
  <li>mercedes (2) <span>remove</span>

  </li>
</ul>
<p>Total Price: <span id="payment-amount">30</span>

</p>
<div class="purchase-car">
  <select>
    <option value="volvo" data-price="10">Volvo ( $10 )</option>
    <option value="saab" data-price="20">Saab ( $20 )</option>
    <option value="mercedes" data-price="10">Mercedes ( $10 )</option>
    <option value="audi" data-price="30">Audi ( $30 )</option>
  </select>
  <input type="number" name="quantity" value="1">
  <button type="submit">Add</button>
</div>

将有一个选择字段和一个输入字段，一旦我单击“添加”(提交时)，这两个值都应作为列表项添加到 ul 中。我已经成功地做到了。但这里我需要计算一下。

比如，所选元素的总价是多少。当我删除特定对象时，它还应该从总价中减去。

http://jsfiddle.net/getanwar/s7ob01o1/

更新:我不想将这些数据直接插入到 DOM 中。因为这是另一种表单的一部分，我不希望可以从控制台或通过开发人员工具编辑这些数据。因此，如果我可以将这些数据存储到数组或对象中并从那里进行计算，那将非常有帮助。

Answer 1

考虑到您的更新，您应该创建一个全局变量。

var vehicles = new Array;

要增加该值，请在插入车辆的函数中添加以下行:

var currentValue = parseInt($("#payment-amount").html());
$("#payment-amount").html(curentValue + (carPrice * carQuantity));
vehicles.push({price: carPrice, quantity: carQuantity});

然后在删除时更新价格:

$("ul").on("click", "li span", function() {
    var index = $(this).parent().index();
    var currentValue = parseInt($("#payment-amount").html());
    var removeValue = vehicles[index]['price'] * vehicles[index]['quantity'];
    $("#payment-amount").html(currentValue - removeValue);
    vehicles.splice(index, 1);
    $(this).parent().remove();
});