Question

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

＆＃13;

$('.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);

});

＆＃13;

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

＆＃13;

将有一个选择字段和一个输入字段，一旦我单击添加（提交时），两个值都应添加到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();
});

jQuery / JS表单问题

1 个答案: