Javascript：如何选择选择器并重新运行函数以提供新结果

Question

我是 Javascript 新手 - 抱歉这是一个愚蠢的问题：

我有一个带有产品的订单 |数量 |价格连续列出。

“产品”是一个选择下拉菜单

一个表单上有多达 35 行这样的行。我得到的代码效果很好，直到您自己返回并想要更改较早的“数量”或从下拉列表中更改“产品”。

问题

1) 更改产品：我的代码无法识别选择了不同的产品。 product_id 没有得到更新。因此，全局变量中的价格是错误的，成本也是错误的。

2) 改变数量：代码确实认识到数量已经改变，但是，它仍然乘以全球价格中的价格

解决方案：如果我更改了数量，或者如果我在选择下拉菜单中更改了产品（即 product_id），那么我的代码需要重新运行并获取新价格。我需要能够清除全局价格变量并为乘法设置新价格。如果它是相同的产品，那么价格将是相同的 - 无论如何。

这是我目前得到的：

var price = 0;

// first we grab the product id //
$(".product_id").on('change', function() {
  var value = parseFloat($(this).val()); // product_id
  console.log('prod_id', value);

  // then we use the product_id to grab the price using AJAX //
  $.ajax({
    type: 'GET',
    url: 'product_prices/' + value,
    success: function(data) {
      var data = JSON.parse(data);
      var result = data[0].price;
      price = Number(result).toFixed(2); // price
      console.log('price', price)

    }
  });
});


// We take the price and multiply by quantity to calculate the cost
$(".quantity").on('change', function() {


  var quantity = parseInt($(this).val());
  var num = (price * quantity);
  var cost = num.toFixed(2);

  $(this).parents(':eq(1)').find('input').filter(".cost").val(cost)
  console.log('cost', cost);
});

Answer 1

不要使用全局的price 变量，而是使用jQuery 的.data() 方法将每一行的价格保存在DOM 中。

$(".product_id").on('change', function() {
  var value = parseFloat($(this).val()); // product_id
  console.log('prod_id', value);
  var row = $(this).closest("tr");
  // then we use the product_id to grab the price using AJAX //
  $.ajax({
    type: 'GET',
    url: 'product_prices/' + value,
    success: function(data) {
      var data = JSON.parse(data);
      var result = data[0].price;
      var price = Number(result).toFixed(2); // price
      console.log('price', price);
      row.data('price', price); // remember the row's current price
    }
  });
});


// We take the price and multiply by quantity to calculate the cost
$(".quantity").on('change', function() {
  var row = $(this).closest('tr');
  var price = row.data('price');
  if (price) {
      var quantity = parseInt($(this).val());
      var num = (price * quantity);
      var cost = num.toFixed(2);

      row.find("input.cost").val(cost)
      console.log('cost', cost);
  }
});