Question

我有一个订单。如果用户更改包裹，价格将会更改。

HTML

<select name="item" id="item">
  <option value="i1">Item1</option>
  <option value="i2">Item2<option>
</select>
<select name="detail" id="detail">
  <option value="d1">Detail1</option>
  <option value="d2">Detail2</option>
</select>
<p>Price : <span id="price"></span></p>

下面的PHP将发送从表单获取的数据

PHP

$item=$_POST["item"];
$detail=$_POST["detail"];
$price=0;
if($item=="p1"){
  $price=$price+10;
}
else{
  $price=$price+5;
}
if($detail=="d1"){
  $price=$price+2;
}
else{
  $price=$price+1;
}
// codes for sending the data to database

下面的

jQuery将显示所选软件包的价格。我希望它在每次更改时都能显示价格

jQuery

var item=$("#item").val();
var detail=$("#detail").val();
var price=0;
$("#item").on('change',function(){
  if(item=="i1"){
    price=price+10; 
    $("#price").html("$ "+price);}
  else{
    price=price+5;
    $("#price").html("$ "+price);}
})
$("#detail").on('change',function(){
  if(detail=="d1"){
    price=price+2;
    $("#price").html("$ "+price);}
  else {
    price=price+1;
    $("#price").html("$ "+price);}
})

我要：price=price(item)+price(detail)。问题是，如果用户多次更改它，它将添加该数字，尽管PHP不会从jQuery发送该数字。

比方说，用户选择Item1和Detail2。价格显示为11。但是，如果用户将其更改为Detail1，它将显示13，依此类推，最后，用户选择Item2和Detail1。 PHP将发送7，但是jQuery将显示7。知道吗？

Answer 1

最简单的解决方案是让一个函数在两个值中的任何一个发生更改时都计算总价，这意味着它将每次都重新计算总价，而不是让两个函数影响相同的值。这是我下面的解决方案：

// Storage for the item prices
var itemDict = {
    "p1": 10,
    "p2": 4,
    "p3": 0
};

// Storage for the detail prices
var detailDict = {
    "d1": 2,
    "d2": 5,
    "d3": 2
};

$("#item").on('change', function () {
    CalcPrice();
})

$("#detail").on('change', function () {
    CalcPrice();
})

function CalcPrice() {
    var price = 0;

    const itemPrice = itemDict[$("#item").val()] || 2; // 2 as a default
    const detailPrice = detailDict[$("#detail").val()] || 1; // 1 as a default

    $("#price").html("$ " + price);
}

Answer 2

嗨：）您可以改用以下代码：

对于您的HTML：

<select name="item" id="item">
  <option value="0" disabled selected>Select your option</option>
  <option value="10">Item1</option>
  <option value="5">Item2<option>
</select>
<select name="detail" id="detail">
  <option value="0" disabled selected>Select your option</option>
  <option value="2">Detail1</option>
  <option value="1">Detail2</option>
</select>
<p>Price : <span id="price"></span></p>

以及您的Jquery：

$(document).ready(function () {
   $("#item,#detail").on('change',function() {
      var item=$("#item").val() || 0;
      var detail=$("#detail").val() || 0;
      var price = 0;
      price = parseInt(item) + parseInt(detail);
      $("#price").html("$ "+price);
   });
});

Answer 3

问题在于以下几行：

var item=$("#item").val();
var detail=$("#detail").val();
var price=0;

您正在全局声明和设置值。当页面加载时，它只会被设置一次。因此，当您在change和#item的{{1}}事件中访问这些变量时，您正在访问这些全局变量中的值并进行数学运算并将其保存回去！因此，下一次触发任何这些#detail事件时（即，如果用户从下拉菜单中更改了项目或明细），您将再次访问全局变量的值，该变量包含先前计算的数据！这就是为什么您获得错误的值。

因此，解决方案是将这三个变量移动到每个change事件的内部（@JYoThi建议的内容），像这样：

change

这可能会暂时解决您的问题！

@Vinia和@Cornelis也提供了一些很好的解决方案，希望您一看就能理解。

干杯！

jQuery如何不每次更改都不添加数字

3 个答案: