我正在研究一个项目,用户可以在其中选择书籍,然后它将计算金额。然后它将要求书籍的支持,然后是促销代码。
上面的项目正在运行,但是我不确定我的代码是否是最好的。还是有什么最好的方法?
让我们谈谈这个问题。
我在促销代码上遇到了问题。我正在做的是,一旦用户在促销代码中输入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>
您能帮我吗?
答案 0 :(得分: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>