JQuery, как не добавлять число при каждом изменении

Самое простое решение - иметь одну функцию, которая вычисляет общую сумму при изменении любого из значений, что означает, что она будет каждый раз пересчитывать общую цену вместо того, чтобы две функции влияли на одно и то же значение. вот мое решение ниже:

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

и для вашего 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);
   });
});

Проблема в этих строках:

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

Вы объявляете и устанавливаете значения глобально. И он будет установлен только один раз при загрузке страницы. Итак, когда вы обращаетесь к этим переменным в событии change для #item и #detail, вы получаете доступ к значениям из этих глобальных переменных, выполняете математические вычисления и сохраняете их обратно! Итак, при следующем запуске любого из этих событий 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 также предоставили несколько хороших решений, надеюсь, вы сможете понять это, посмотрев на них.

Ваше здоровье!