Question

这是一个非常详细的表格，需要输入许多值，结果是一个价格，根据主2选择框获取价格的功能运行良好，它为我提供了一个变量“ price”，该价格在复选框更改时进行了更新＆选择框更改，问题在于某些复选框会影响最终价格，例如将总价格增加40％，更改效果就很好，只有一个复选框会影响价格，但是在添加其他影响价格的输入时，该复选框不计入价格以前的输入。

我尝试放入许多条件，例如是否选中了第一个复选框并选择了第一个收音机：..否则，如果选中了第一个复选框并选择了第二个收音机，则执行.. 但是听起来很复杂，我希望有一种使用j查询或JavaScript的简便方法

function getPrice() {
//let's assume the price is 80
price = 80;
//order duo is supposed to add 20% of total price
if ($('#order_duo').is(':checked')) {
 document.getElementById("price").textContent=price + price*0.2;
 document.getElementById("price_input").value = price +  price*0.2;
}   
else {
    document.getElementById("price").textContent=price;
    document.getElementById("price_input").value = price;
}
//if prefered lane is support add 50% of total price
$('#prefered_lane').on('change', function() {
    prefered_lane = this.value;
    if (prefered_lane === "Support") {
      getPrice();
      price =   parseInt(document.getElementById("price_input").value);
    document.getElementById("price").textContent=price + price*0.5;
    document.getElementById("price_input").value = price +  price*0.5;
  }else{
    getPrice();
    price = document.getElementById("price_input").value;
     document.getElementById("price").textContent=price;
    document.getElementById("price_input").value = price;
  }
}); 
}
$('#prefered_lane').on('change', function() {
  getPrice();
  });
$('#order_duo').click(
    function () {
     if ($('#order_duo').is(':checked')) {
   getPrice();
}   
else {
    getPrice();
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
        <input type="text" name="price_input" id="price_input" value="" hidden="">
<input type="checkbox" value="true" name="order_duo" class="form-check-input" id="order_duo"  style="width: 20px;height: 20px;">
<select id="prefered_lane" name="prefered_lane" class="form-control" style="text-align-last: center;"  autocomplete="off">
  <option value="Top Lane">Top Lane</option>
  <option value="Jungle">Jungle</option>
  <option value="Mid Lane">Mid Lane</option>
  <option value="AD Carry">AD Carry</option>
  <option value="Support">Support (+50%)</option>
</select>  

<div class="first">Buy Now</div>
<div class="second">For € <strong id="price"></strong></div>
                    
</form>

在选择支持价格时取消选中二重奏将重置为80：/

Answer 1

您正在getPrice函数的每次计算中重置价格，但是您没有同时考虑lane和duo条件，仅考虑了duo。

在价格计算期间，函数内的$('#prefered_lane').on()块不执行。它的作用是在select元素中添加一个 new 事件处理程序，因此结果是，如果取消选中duo，价格将回到原始的80。

记住这一点，您可以清理代码：

// Do calculations whenever any element changes
$('#order_duo, #prefered_lane').change(function() {
  //let's assume the price is 80
  let price = 80;

  //order duo is supposed to add 20% of total price
  if ($('#order_duo').is(':checked')) {
    price = price * 1.2;
  }
  //if prefered lane is support add 50% of total price
  if ($('#prefered_lane').val() === "Support") {
    price = price * 1.5;
  }

  $('#price').text(price);
  $('#price_input').val(price);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" name="price_input" id="price_input" value="" hidden="">
  <input type="checkbox" value="true" name="order_duo" class="form-check-input" id="order_duo" style="width: 20px;height: 20px;">
  <select id="prefered_lane" name="prefered_lane" class="form-control" style="text-align-last: center;" autocomplete="off">
    <option value="Top Lane">Top Lane</option>
    <option value="Jungle">Jungle</option>
    <option value="Mid Lane">Mid Lane</option>
    <option value="AD Carry">AD Carry</option>
    <option value="Support">Support (+50%)</option>
  </select>

  <div class="first">Buy Now</div>
  <div class="second">For € <strong id="price"></strong></div>

</form>

根据表单值更新变量

1 个答案: