javascript - 删除促销代码后最终金额不变

Question

我正在开发一个项目，用户可以选择书籍并计算金额。然后它会要求书籍的支持，然后是促销代码。

上述项目正在运行，但我不确定我的代码是否是最好的。或者有什么最好的办法吗？

我们来谈谈这个问题。

我在促销代码上遇到了问题。我正在做的是，一旦用户在促销代码中输入 5 个字符，它就会检查数据库中的促销代码是否有效。如果有效，那么它将使用 var FinalAmt=$("#youPay").text(); 捕获总成本并计算金额并显示。如果没有促销代码，则会显示最终费用。

我在else部分遇到了这个问题。如果用户第一次输入正确的促销代码，它将计算它，但如果第二次用户删除促销代码，则应显示最终金额，但我没有得到最终金额。我正在获取用户首次输入促销代码的金额。

示例促销代码是

BOOKS | 2%

任务的实时示例

choose 3 books      3*5= 15
choose support Yes 15*2= 30
Enter promocode BOOKS 30 * (2/100)=0.6

Final amount 30- 0.6= 29.4

Pay amount is 29.4

如果用户删除了促销代码，那么我的最终金额仍显示 29.4。应该是 30。

促销代码其他条件存在一些问题。

function myFunction() {
  var discountAmt = [];
  discountAmt[0] = "0";
  discountAmt[1] = "5";
  discountAmt[2] = "10";
  discountAmt[3] = "15";
  var n = $(".checkBoxLabel:checked").length;
  var multiply = 5 * n;
  var totalAmount = $('#totalAmount').html("$" + multiply);
  var discountAmount = $('#discountAmount').html("$" + discountAmt[n]);
  var youPay = $('#youPay').html(discountAmt[n]);
  return [totalAmount, discountAmount, youPay];
}


$(document).ready(function() {

  var $checks = $('.checkBoxLabel:checkbox');
  $checks.click(function() {
    if ($checks.filter(':checked').length == 0) {
      $('.calculationStrip').hide();
    } else {
      $('.calculationStrip').show();
      var codes = myFunction();
      $('#youPay').html(codes[2].html());
    }
  });

  $("#ckbCheckAll").click(function() {
    $(".checkBoxLabel").prop('checked', $(this).prop('checked'));
    var codes = myFunction();
    $('.calculationStrip').show();
    $('#youPay').html(codes[2].html());
  });

  $(".checkBoxLabel").change(function() {
    if (!$(this).prop("checked")) {
      $("#ckbCheckAll").prop("checked", false);
    }
  });

  /*Customization script here*/
  $('.support').on('click', function() {
    var codes = myFunction();
    if ($(this).val() === '1') {
      var a = codes[2].html();
      var totCost = a * 2;
      $('#youPay').html(totCost);

    } else {
      $('#youPay').html(codes[2].html());
    }
  });

  $('#procode').keyup(function() {
    if (this.value.length >= 5) {
      var checkPromocode = $(this).val();

      $.ajax({
        type: "POST",
        url: baseUrl + "/C_Registration/checkPromocode",
        data: {
          checkPromocode: checkPromocode
        },
        success: function(response) {
          var obj = JSON.parse(response);
          //alert(obj.message);
          var finalAmt = $("#youPay").text();

          var codes = myFunction();
          $('#promocodeMessage').html(obj.message);
          var sellingprice = finalAmt - (finalAmt * (obj.discount / 100));
          $('#youPay').html(sellingprice.toFixed(2));

        } //END success fn
      }); //END $.ajax
    } else {

      $("#youPay").text();
      $('#promocodeMessage').html("Please check your promo code");
    }


  });
});

<ul class="bookList">
  <li><input type="checkbox" class="checkbox_round show_on_click select_all" id="ckbCheckAll">Select All</li>
  <li><input type="checkbox" name="book[]" value="1" class="all_checkbox checkBoxLabel ">Book One </li>
  <li><input type="checkbox" name="book[]" value="2" class="all_checkbox checkBoxLabel "> Book Two</li>
  <li><input type="checkbox" name="book[]" value="3" class="all_checkbox checkBoxLabel"> Book Three</li>
</ul>

<p>suport fields if user choose Yes then it will calculate the total cost mutiply by numbre of books. for example user chose two books then total cost is 10*2=20</p>
<ul>
  <li><input type="radio" name="support" value="1" class="support">Yes</li>
  <li><input type="radio" name="support" value="0" class="support">No</li>
</ul>

<!--amount display here-->
<p>Final Amount to pay:- $<span id="youPay"></span> </p>


<input type="text" name="promocode" placeholder="Code here" class="form-control promoField" id="procode" autocomplete="off">
<p class="pull-right"><span id="promocodeMessage"></span></p>





<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

你能帮我解决这个问题吗？

Answer 1

使用$('.support:checked').val()您可以获得当前选定的单选按钮的值。我修改了你的代码来利用它。

function myFunction() {
  var discountAmt = [];
  discountAmt[0] = "0";
  discountAmt[1] = "5";
  discountAmt[2] = "10";
  discountAmt[3] = "15";
  var n = $(".checkBoxLabel:checked").length;
  var multiply = 5 * n;
  var totalAmount = $('#totalAmount').html("$" + multiply);
  var discountAmount = $('#discountAmount').html("$" + discountAmt[n]);
  var youPay = $('#youPay').html(discountAmt[n]);
  return [totalAmount, discountAmount, youPay];
}
var $totalCost = 0;
function checkPromocode() {
    if ($('#procode').val().length >= 5) {
      var checkPromocode = $('#procode').val();

      $.ajax({
        type: "POST",
        url: baseUrl + "/C_Registration/checkPromocode",
        data: {
          checkPromocode: checkPromocode
        },
        success: function(response) {
          var obj = JSON.parse(response);
          //alert(obj.message);
          var finalAmt = $totalCost;

          var codes = myFunction();
          $('#promocodeMessage').html(obj.message);
          var sellingprice = finalAmt - (finalAmt * (obj.discount / 100));
          $('#youPay').html(sellingprice.toFixed(2));

        } //END success fn
      }); //END $.ajax
    } else {
        var codes = myFunction();
        //recalculate the value depending on the currently selected radio button
        if ($('.support:checked').val() === '1') {
          var a = codes[2].html();
          var totCost = a * 2;
          $('#youPay').html(totCost);
        } else {
          $('#youPay').html(codes[2].html());
        }
      $('#promocodeMessage').html("Please check your promo code");
    }
}

$(document).ready(function() {

  var $checks = $('.checkBoxLabel:checkbox');
  $checks.click(function() {
    if ($checks.filter(':checked').length == 0) {
      $('.calculationStrip').hide();
    } else {
      $('.calculationStrip').show();
      var codes = myFunction();
      $totalCost = codes[2].html();
      $('#youPay').html(codes[2].html());
    }
  });

  $("#ckbCheckAll").click(function() {
    $(".checkBoxLabel").prop('checked', $(this).prop('checked'));
    var codes = myFunction();
    $('.calculationStrip').show();
    $totalCost = codes[2].html();
    $('#youPay').html(codes[2].html());
  });

  $(".checkBoxLabel").change(function() {
    if (!$(this).prop("checked")) {
      $("#ckbCheckAll").prop("checked", false);
    }
  });

  /*Customization script here*/
  $('.support').on('click', function() {
    var codes = myFunction();
    if ($(this).val() === '1') {
      var a = codes[2].html();
      var totCost = a * 2;
      $totalCost = totCost;
      $('#youPay').html(totCost);

    } else {
      $totalCost = codes[2].html();
      $('#youPay').html(codes[2].html());
    }
    checkPromocode();
  });

  $('#procode').keyup(function() {
    checkPromocode();
  });
});

<ul class="bookList">
  <li><input type="checkbox" class="checkbox_round show_on_click select_all" id="ckbCheckAll">Select All</li>
  <li><input type="checkbox" name="book[]" value="1" class="all_checkbox checkBoxLabel ">Book One </li>
  <li><input type="checkbox" name="book[]" value="2" class="all_checkbox checkBoxLabel "> Book Two</li>
  <li><input type="checkbox" name="book[]" value="3" class="all_checkbox checkBoxLabel"> Book Three</li>
</ul>

<p>suport fields if user choose Yes then it will calculate the total cost mutiply by numbre of books. for example user chose two books then total cost is 10*2=20</p>
<ul>
  <li><input type="radio" name="support" value="1" class="support">Yes</li>
  <li><input type="radio" name="support" value="0" class="support">No</li>
</ul>

<!--amount display here-->
<p>Final Amount to pay:- $<span id="youPay"></span> </p>


<input type="text" name="promocode" placeholder="Code here" class="form-control promoField" id="procode" autocomplete="off">
<p class="pull-right"><span id="promocodeMessage"></span></p>





<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>