我的基本设置是我有一个隐藏的表单，直到通过点击进行选择，例如“会员，非会员，员工等”。单击选择后，表单将显示，内部的计费区域也会隐藏，直到表单总数达到$ 0以上。
现在我遇到的问题是，只要点击5个选项中的4个，总数应立即大于$ 0。就这样，计费部分应该自动触发，但是我无法获得第二个函数（进行计算的函数）来监听onclick事件或更改事件的第一个函数。有没有办法在我的每个“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 here表单中看到的那样，如果您单击某个选项，则通过在访客中插入一个数字来添加更多“费用”，然后显示结算部分。但这还不够好，因为如果他们不想要任何客人，那么结算部分仍应显示其基本费用是否大于0美元。
如果有人能指出我正确的方向，这将是伟大的。
此外，我对jQuery缺乏经验，所以我确信我的代码可能会变得更干，可能看起来很糟糕，但至少这是一个开始。
答案 0 :(得分：3)
好吧，我继续为你的代码做了一些重构。 Here's the result.
您使用链接在表单之间切换。但是，链接本身间接（通过您的JavaScript代码）设置了一个名为SectionChosen的隐藏输入。您可以更明显地点击链接代表选项，并且该选择也是表单数据的一部分。因此，使用一组无线电盒来选择一个选项，而不是一组语义无关的链接更为合适。由于广播框是具有input和name的正确value元素，因此这些元素可以替换原始隐藏的SectionChosen输入。额外奖励：您甚至不需要任何JavaScript来设置值，因为将提交所选单选框的值！
<label><input type="radio" name="SectionChosen" value="Member" /> I am an IMS Member Physician</label>
<label><input type="radio" name="SectionChosen" value="Clinic" /> I am a Clinic/Hospital Administrators or Clinic Staff</label>
...
在click处理程序中，您尝试设置名为base_cost的局部变量，具体取决于所点击的链接以计算总计。问题是您将新处理程序绑定到input的{{1}}事件，堆叠在先前绑定的处理程序上。它看起来很有效，但实际上你只计算了最后一个绑定处理程序产生最终输出值的总计数。
实际上，基本成本是所选部分的属性，并且在切换部分和更改表单输入时都应该可以轻松访问。执行此操作的一种好方法是将每个选项的基本成本存储为单选框上的属性。 change属性专门针对此类自定义数据需求而引入：
data-*然后可以使用以下方法检索基本费用：
<input type="radio" name="SectionChosen" value="Member" data-base-cost="150" />
要从当前选定的部分获取基本费用，只需查找当前选中的单选框：
var base_cost = $(...).data('base-cost');
这就是它的全部！您不再需要在var base_cost = $('input[name=SectionChosen]:checked').data('base-cost');
处理程序中绑定change处理程序，因为您可以在标记本身中找到基本成本。这意味着您只需要在DOM就绪时绑定click处理程序，就像它应该的那样。
总是有进一步改善的空间。例如，您可以为实际表单部分提供与部分名称匹配的change属性，而不是data-section。这样，您可以更轻松地选择需要隐藏的部分和需要显示的部分。您可以选择id和.section[data-section="Member"]之类的内容，而不是写下同一个ID选择器列表。哎呀，.section:not([data-section="Member"])值甚至可以来自所选的单选框本身，你甚至不再需要一个很长的data-section树了！
答案 1 :(得分：1)
有几件事。通过在$('input[name^=PROD]').change处理程序中使用click绑定，每次触发click处理程序时，您将添加相同的处理程序。这意味着在第二次单击时，当您更改输入时，它将触发两次。这可能不是你想要的。
其次，为什么不将计算总计的部分抽象为可以在click处理程序中调用的单独函数。
function calculateTotal() {
// your code to calculate the total and make part of the UI visible if more than
// $0.
}
然后你也可以让你的change处理程序调用它：
$('input[name^=PROD]').change(function() {
calculateTotal();
}