Question

我通过ajax获得基本价格然后我有两个（引导程序）单选按钮让用户添加额外内容，其中显示“是”和“否”。所以现在，当我获得基本价格并点击其中一个单选按钮上的“否”时，它会从基本价格中减去而不是保持价格相同。

案例1：当用户点击“是”时，额外价格会添加到基本价格中，当用户改变主意并选择“否”时，会从基本价格中减去额外价格（已添加）。这是应该的。

案例2：当用户在获得价格后点击“否”时，它应该保持价格相同。目前正在发生的是，如果用户首先选择“否”，则从基本价格中减去额外的价格。

var price = 550;
 var price_container = $('.price_container');

 $('input[type=radio][name=lids_check').change(function() {

   //alert("This works!")
   var lid_price = 50;

   var modifier = (this.value == 'Yes') ? 1 : -1;

   price = parseFloat(price) + (modifier * parseFloat(lid_price));

   console.log(price);
   price_container.html(price);


 });

 $('input[type=radio][name=extras_check').change(function() {

   var extras_price = 200;

   var modifier = (this.value == 'Yes') ? 1 : -1;

   price = parseFloat(price) + (modifier * parseFloat(extras_price));

   console.log(price);
   price_container.html(price);
 });

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-sm-2 col-form-label">Base Price</label>
<span>550</span>
<br>
<label class="col-sm-2 col-form-label">Lids</label>
<div class="col-sm-4 btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary">
    <input type="radio" name="lids_check" id="lids_checkyes" autocomplete="off" value="Yes"> Yes
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="lids_check" id="lids_checkno" autocomplete="off" value="No"> No
  </label>
</div>
<br>
<label class="col-sm-2 col-form-label">Extras</label>
<div class="col-sm-4 btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary">
    <input type="radio" name="extras_check" id="extras_checkyes" autocomplete="off" value="Yes"> Yes
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="extras_check" id="extras_checkno" autocomplete="off" value="No"> No
  </label>
</div>
<br>
<label class="col-sm-2 col-form-label">Price</label>
<span class="price_container"></span>

Answer 1

如果我正确地解释了您的问题，您希望在尚未选择“是”的情况下提高价格，并在选择“是”时降低价格。我们可以使用flag变量来实现这个逻辑，以跟踪是/否选择。

var chosen = false;
$('input[type=radio][name=lids_check').change(function() {
    var lid_price = 50;

    if (this.value == 'Yes' && !chosen) {
        price = parseFloat(price) + parseFloat(lid_price);
        chosen = true;
    }
    else if (this.value == 'No' && chosen) {
        price = parseFloat(price) - parseFloat(lid_price);
        chosen = false;
    }

   console.log(price);
   price_container.html(price);
});

Answer 2

你不需要＆＃34;修饰符。＆＃34;

您正在丢失该项目的原始价格，因为您重新计算它。您开始时的价格= 550，最后是价格=其他数字。您无法在没有原始价格的情况下重新执行计算。

您需要保留原始价格并根据需要添加。像这样：

var originalPrice = 550; <-- don't use the name "price" here.  

...

$('input[type=radio][name=extras_check').change(function() {

   var extras_price = 200;

   price = this.value == 'Yes' ? parseFloat(originalPrice) + parseFloat(extras_price) : parseFloat(originalPrice);

   console.log(price);
   price_container.html(price);
});

仅在添加金额时减去

2 个答案: