我的基本设置是我有一个隐藏的表单,直到通过单击进行选择,例如“成员、非成员、员工等”。单击选择后,表单将显示,其中的计费区域也将隐藏,直到表单总额超过 0 美元。
现在我遇到的问题是,一旦点击了 5 个选项中的 4 个,总数应该立即大于 0 美元。既然如此,计费部分应该自动触发,但我无法让我的第二个函数(进行计算的那个)监听 onclick 事件或 on change 事件的第一个函数。有没有一种方法可以在我的每个“if”语句中,最后我放入“执行计算函数”之类的代码?
像这样的东西:
if(section == 'Member') {
var base_cost = 150;
$("#commentTable,#ClinicStaff,#IMSNonMember,#Resident,#Student").fadeOut('slow', function() {
// Animation complete.
});
$("#commentTable, #IMSMember").fadeIn('slow', function() {
// Animation complete
});
$("input[name=SectionChosen]").val('Member');// Section selected, pass as hidden field for processing
***$runNextFunction();***
}
我试着做:$(" 'input[name^=PROD]', 'base_cost ").change(function() {
看看我是否可以让函数监视输入和基本成本字段的变化。但它不想触发。这是我的完整设置:
jQuery(function(ready){
jQuery('.showForm').click(function(){
var section = $(this).attr('target');
var base_cost = ''; // reset base cost
$("input[name=TOTAL]").val('');// Reset the Total field to 0 to hide the billing form again
$("input[name^=PROD]").val('');// matches those that begin with 'PROD' and clears them
$("input[name=SectionChosen]").val('');// Reset the section choice
if(section == 'Member') {
var base_cost = 150;
$("#commentTable,#ClinicStaff,#IMSNonMember,#Resident,#Student").fadeOut('slow', function() {
// Animation complete.
});
$("#commentTable, #IMSMember").fadeIn('slow', function() {
// Animation complete
});
$("input[name=SectionChosen]").val('Member');// Section selected, pass as hidden field for processing
}
else if(section == 'Clinic') {
var base_cost = 150;
$("#commentTable,#IMSMember,#IMSNonMember,#Resident,#Student").fadeOut('slow', function() {
// Animation complete.
});
$("#commentTable, #ClinicStaff").fadeIn('slow', function() {
// Animation complete
});
$("input[name=SectionChosen]").val('Clinic');// Section selected, pass as hidden field for processing
}
else if(section == 'Nonmember') {
var base_cost = 250;
$("#commentTable,#IMSMember,#ClinicStaff,#Resident,#Student").fadeOut('slow', function() {
// Animation complete.
});
$("#commentTable, #IMSNonMember").fadeIn('slow', function() {
// Animation complete
});
$("input[name=SectionChosen]").val('Nonmember');// Section selected, pass as hidden field for processing
}
else if(section == 'Resident') {
var base_cost = 75;
$("#commentTable, #IMSMember,#ClinicStaff,#IMSNonMember,#Student").fadeOut('slow', function() {
// Animation complete.
});
$("#commentTable, #Resident").fadeIn('slow', function() {
// Animation complete
});
$("input[name=SectionChosen]").val('Resident');// Section selected, pass as hidden field for processing
}
else if(section == 'Student') {
var base_cost = 0;
$("#commentTable,#IMSMember,#ClinicStaff,#IMSNonMember,#Resident").fadeOut('slow', function() {
// Animation complete.
});
$("#commentTable, #Student").fadeIn('slow', function() {
// Animation complete
});
$("input[name=SectionChosen]").val('Student');// Section selected, pass as hidden field for processing
}
// Calculate order Total
$('input[name^=PROD]').change(function() {
// Total cost of order, is equal to base cost + any additional selectoins made below
var order_total = base_cost;
// Run through all the form fields
$('input[name^=PROD]').each(function(i) {
// Get the current field and its name
var form_name = $(this).attr('name');
// If so, extract the price from the name
var item_price = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1));
// Get the quantity
var item_quantity = parseInt($(this).val(), 10);
// Update the order total
if (item_quantity >= 0) {
order_total += item_quantity * item_price
}
});
// Display the total rounded to two decimal places
$('input[name=TOTAL]').val((Math.round(order_total*100)/100).toFixed(2));
// Show the billing portion if total is not 0
if (order_total > 1) {
// show the section with the billing portion
$("#BillingPortion").show();
}
else {
// hide billing portion if total is 0
$("#BillingPortion").hide();
}
});
});
});
正如您从此处的 jsFiddle中看到的那样,表单有效,如果您单击一个选择,然后通过在客人中插入一个数字来添加更多“成本”,然后显示计费部分。但这还不够好,因为如果他们不想要任何客人,帐单部分仍应显示他们的基本成本是否大于 0 美元。
如果有人能指出我正确的方向,那就太好了。
此外,我在 jQuery 方面还很缺乏经验,所以我确信我的代码可以变得更加 DRY,并且对你们中的一些人来说可能看起来很糟糕,但至少这是一个开始。