私の基本的な設定は、「メンバー、非メンバー、スタッフなど」をクリックして選択するまで、非表示のフォームを用意することです。選択がクリックされると、フォームの合計が$ 0を超えるまで、フォームに表示され、内部の請求領域も非表示になります。
今私が抱えている問題は、5つの選択肢のうち4つがクリックされるとすぐに、合計が$0より大きくなるはずだということです。そのため、請求部分は自動的にトリガーされますが、onclickイベントまたはonchangeイベントの最初の関数をリッスンする2番目の関数（計算を実行する関数）を取得できません。それぞれの「if」ステートメントの中に、「 executecalculatefunction」のようなコードを入れる方法はありますか？
このようなもの：
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にすることができ、おそらく一部の人にとってはひどいように見えると思いますが、少なくともそれは始まりです。