Php jQuery如何不在每次更改时添加数字_Php_Jquery_Html

Php jQuery如何不在每次更改时添加数字

php jquery html

Php jQuery如何不在每次更改时添加数字,php,jquery,html,Php,Jquery,Html,我有一张订单。如果用户更改了软件包，则价格将发生变化 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">De

我有一张订单。如果用户更改了软件包，则价格将发生变化

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>

下面的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=价格（项目）+价格（细节）

。问题是，如果用户多次更改，它会添加数字，尽管PHP不会从jQuery发送数字

比方说，用户选择Item1和Detail2。价格是11英镑。但是，如果用户将其更改为Detail1，它将显示13，以此类推，最后，用户选择Item2和Detail1。PHP将发送7，但jQuery将显示7以上。有什么想法吗？

最简单的解决方案是，当其中一个值发生变化时，使用一个函数计算总价，这意味着每次都会重新计算总价，而不是使用两个函数影响同一个值。以下是我的解决方案：

// 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);
}

最简单的解决方案是使用一个函数，在任意一个值发生变化时计算总价，这意味着它将每次重新计算总价，而不是使用两个函数影响同一个值。以下是我的解决方案：

// 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);
}

您好：）您可以改为使用此代码：

适合您的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>

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

您好：）您可以改为使用此代码：

适合您的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>

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

问题在于这些线路：

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

您正在全局声明和设置值。当页面加载时，它只会被设置一次。因此，当您在

#item

和

#detail

的

change

事件中访问这些变量时，您正在访问这些全局变量的值，并进行计算并将其保存回来！因此，下一次触发这些

change

事件时（即，如果用户从下拉列表中更改了项目或细节），您将再次访问全局变量中的值，其中包含来自上一次计算的数据！这就是为什么你得到了错误的价值观

因此，解决方案是将这三个变量移动到每个

change

事件的内部（正如@JYoThi所建议的）如下：

$("#item").on('change',function(){
  var item=$("#item").val();
  var detail=$("#detail").val();
  var price=0;

  if(item=="i1"){
    price=price+10; 
    $("#price").html("$ "+price);}
  else{
    price=price+5;
    $("#price").html("$ "+price);}
});

$("#detail").on('change',function(){
  var item=$("#item").val();
  var detail=$("#detail").val();
  var price=0;

  if(detail=="d1"){
    price=price+2;
    $("#price").html("$ "+price);}
  else {
    price=price+1;
    $("#price").html("$ "+price);}
});

这可能会解决你现在的问题

@Vinia和@Cornelis也提供了一些很好的解决方案，希望您能够通过查看了解它

干杯