我的问题解决方案

Question

这是一个费用计算器的示例，它将根据用户选择和回答的内容运行实时计费（jQuery）。我试图弄清楚如何根据两个下拉菜单和一个文本框字段创建许多IF语句来计算费用。

我想要完成的是一个jQuery IF函数，当用户选择出生月份（计算月份）时，用onChange="calculateTotal()"计算这将计算从现在到下一个生日的几个月。但我需要根据车辆下降（车身）和输入的重量（ew）来确定IF功能，这三项将决定价格。如下面的示例和下面的代码段。

例如（三种情况）：
[1]如果选择从现在起4-12个月，以及重量低于2499的2dr车辆，价格将是28.10加到运行费用计算器上。
[2]如果选择从现在起4-12个月，以及重量在2500和3499之间的2dr车辆，价格将是36.10加到运行费用计算器上。
[3]如果选择从现在起4-12个月，以及重量大于3500的2dr车辆，价格将是46.10加到运行费用计算器上。

故事很长我想要一个IF函数，根据所选择的（车体）计算onChange="calculateTotal()"和var titleFees = getProofOfOwnership() + (New IF Function);＆amp; （ew）进入＆amp;然后IF（monthsToGo）等于4到12这样的这样的价格。如果（monthsToGo）是1,2,3,13,14或15，价格将按比例分配，所以它也有自己的价格。

如果在1个月之后，他们要求用户支付该月和全年支付13个月，但如果是2个月他们让用户选择2个月或14个月同样的3个月或15个月（如你看到计算月数下降）但是一旦它是4个月（他们支付全额，无论4-12个月）

可怕的是，我必须弄清楚50种不同的组合，所以希望通过jQuery极度缺乏知识，我很容易理解。

任何帮助都会非常，非常，非常感谢！：）

http://jsfiddle.net/fzy9yev3/15/

请参阅下面的代码段：

//Calculate Months
(function() {
    var monthsToGo;
    var Fee = makeStruct("monthSect vehicleBody ewSect price");
    var fees = [
        new Fee(/*monthSect*/2, /*vehicleBody*/0, /*ewSect*/0, /*price*/45.10),
        new Fee(3, 1, 0, 55.10),
        new Fee(4, 2, 0, 65.10),
        new Fee(13, 3, 0, 75.10),
        new Fee(14, 4, 0, 85.10),
        new Fee(15, 5, 0, 95.10)
    ];

    $(document).ready(function() {
        $('#month2, #month3').hide();
    });
    
    $(document).on('change', '#ownership input', function(){
        calculateTotal();
        //statedropDown($(this).val());
    });
    
    $(document).on('change', '#month1', function() {
        // ignore blank options
        if ($(this).val() == '') { return; }
        
        var vehicle = $('#vehiclebody').val();
        var ew = $('#ew').val();
        var ewSect = 0;
        var monthSect = 0;
        var titleFees = 0;
        
        if(vehicle == '' || ew == ''){
            alert('Please enter Vehicle Type and/or Empty Weight');
            $(this).val('');
            return;
        }
        
        var today = new Date();
        var birthdate = new Date();
        birthdate.setMonth($('#month1').val());

        monthsToGo = (today.getMonth() < birthdate.getMonth())
            ? birthdate.getMonth() - today.getMonth()
            : (12 - today.getMonth()) + birthdate.getMonth()
        ;
        
        $('#month2').hide();
        $('#month3').hide();

        if (monthsToGo == 1) {
            this.monthsToGo = 13;
            alert(this.monthsToGo);
        } else if (monthsToGo == 2) {
            $('#month2').show();
        } else if (monthsToGo == 3) {
            $('#month3').show();
        } else {
            this.monthsToGo = monthsToGo;
            alert(this.monthsToGo);
        }
        
        if(monthsToGo >= 4 || monthsToGo <= 12){
            monthSect = 4;
            //Set monthsToGo to 4 if it is in this range for the linked list so
            //categorizing is easier
            //6 possibilities for dates -- 2, 3, 4, 13, 14, 15
        }
        else monthSect = monthsToGo;
        
        switch(vehicle){
            case 0://2dr
            case 2://4dr
            case 4://convertible
            case 5://van
                if(ew < 2500) ewSect = 0;
                else if(ew >= 2500 && ew < 3500) ewSect = 1;
                else if(ew >= 3500) ewSect = 2;
                break;
            case 1://pickup
                if(ew < 2000) ew = 0;
                else if(ew >= 2000 && ew <= 3000) ewSect = 1;
                else if(ew > 3000 && ew <= 5000) ewSect = 2;
                break;
            case 3://trucks
                if(ew > 5000 && ew < 6000) ewSect = 0;
                else if(ew >= 6000 && ew < 8000) ewSect = 1;
                else if(ew >= 8000 && ew < 10000) ewSect = 2;
                else if(ew >= 10000 && ew < 15000) ewSect = 3;
                else if(ew >= 15000 && ew < 20000) ewSect = 4;
                else if(ew >= 20000 && ew <= 26000) ewSect = 5;
                else if(ew > 26000 && ew < 35000) ewSect = 6;
                else if(ew >= 35000 && ew < 44000) ewSect = 7;
                else if(ew >= 44000 && ew < 55000) ewSect = 8;
                else if(ew >= 55000 && ew < 62000) ewSect = 9;
                else if(ew >= 62000 && ew < 72000) ewSect = 10;
                else if(ew >= 72000 && ew <= 8000) ewSect = 11;
                break;
        }
        
        console.log('Month Section (monthSect): ' + monthSect + '; Vehicle: ' + vehicle + '; EW Section (ewSect): ' + ewSect);
        
        for(var i = 0; i < fees.length; i++){
            console.log('infor');
            if(fees[i].monthSect == monthSect && fees[i].vehicleBody == vehicle && fees[i].ewSect == ewSect) {
                titleFees = getProofOfOwnership() + fees[i].price;
                console.log('Title Found! ' + titleFees);
                $('#totalPrice').text('Estimated Transfer Fees $' + titleFees);
                break;
            }
        }
        
    });

    $('#month2, #month3').on('change', function() {
        this.monthToGo = $(this).val();
        alert(this.monthToGo);
    });
    
}($))

//Fee Calculator
//Setting Proof of Ownership Prices
 //Set up an associative array
 var title_prices = new Array();
 title_prices["MCO"]=68.25;
 title_prices["FL Title"]=78.25;
 title_prices["OOS Title"]=88.25;
 
 // Proof of Ownership Radio Buttons
function getProofOfOwnership()
{  
    var proofOfOwnership=0;
    //Get a reference to the form id="form"
    var theForm = document.forms["form"];
    //Get a reference to the title the user Chooses name=ownerShip":
    var ownerShip = theForm.elements["ownership"];
    //Here since there are 4 radio buttons ownerShip.length = 4
    //We loop through each radio buttons
    for(var i = 0; i < ownerShip.length; i++)
    {
        //if the radio button is checked
        if(ownerShip[i].checked)
        {
            proofOfOwnership = title_prices[ownerShip[i].value];
            //If we get a match then we break out of this loop
            //No reason to continue if we get a match
            break;
        }
    }
    //We return the proofOfOwnership
    return proofOfOwnership;
}
function calculateTotal()
{

    var titleFees = getProofOfOwnership();
    


    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Estimated Transfer Fees $"+titleFees;

}

function hideTotal()
{
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='none';
}

function makeStruct(names) {
  var names = names.split(' ');
  var count = names.length;
  function constructor() {
    for (var i = 0; i < count; i++) {
      this[names[i]] = arguments[i];
    }
  }
  return constructor;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form name="form">
    <div id="ownership">
        <label class='radiolabel'><input type="radio"  name="ownership" required="yes" message="Please select proof of ownership." value="MCO"/>Manufacturer's Statement of Origin&nbsp;&nbsp;</label><br/>
        <label class='radiolabel'><input type="radio"  name="ownership" value="FL Title"/>Florida Certificate of Title&nbsp;&nbsp;</label><br/>
                <label class='radiolabel'><input type="radio"  name="ownership" value="OOS Title"/>Out-of-state Certificate of Title&nbsp;&nbsp;</label>
        </div>

    <br/>
    <br/>

<label for='month1'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Calculate Months:</label>
<select name="month1" id="month1" size="1">
    <option value="">Choose a Month</option>
    <option value="0">January</option>
    <option value="1">February</option>
    <option value="2">March</option>
    <option value="3">April</option>
    <option value="4">May</option>
    <option value="5">June</option>
    <option value="6">July</option>
    <option value="7">August</option>
    <option value="8">September</option>
    <option value="9">October</option>
    <option value="10">November</option>
    <option value="11">December</option>
</select>
<select name="month2" id="month2" size="1">
    <option value="">Choose an Option</option>
    <option value="2">2</option>
    <option value="14">14</option>
</select>
<select name="month3" id="month3" size="1">
    <option value="">Choose an Option</option>
    <option value="3">3</option>
    <option value="15">15</option>
</select>
    <br/>
    

<select name="vehiclebody" id="vehiclebody" required="yes" message="Please select body." size="1">
    <option value="">Choose a Vehicle</option>
    <option value="0">2Dr</option>
    <option value="1">Pickup</option>
    <option value="2">4dr</option>
    <option value="3">Truck</option>
    <option value="4">Convertible</option>
    <option value="5">Van</option>
</select>

<label for="ew">Empty Weight:</label>
    <input type="text" name="ew" id="ew"/>
    <br/>
    <br/>
    <div id="totalPrice"></div>
</form>

Answer 1

我建议采用一种方法，不仅可以清理代码，还可以更轻松地计算，测试，验证和添加新功能。稍微清理一下可以使您的应用程序更容易扩展和调试，但更重要的是，对于您的情况，一点点清理将帮助您计算您正在寻找的值并解决您的问题直截了当的。

建议＃01：整理您的代码

现在你有一些功能试图一次做太多。如果你保持简单并让每个函数都专门化，那么函数就更容易测试和调试。特定的东西。例如，在on.("change")下拉菜单的$("#month1")处理程序中，您正尝试一次执行所有操作，这是您遇到麻烦的地方。相反，您需要为.on("change")下拉列表分配一个#month1处理程序，以确定是否需要显示#month2或#month3，然后分配一个单独的.on("change")处理程序从这两个下拉列表中收集值。当你在它的时候，你会想要打破任何专业的＃34;将功能集成到自己的函数中以保持代码清洁。

您的#month1更改处理程序的一个示例，它只是试图一次性执行太多操作：

$(document).on('change', '#month1', function() {
    // 1. Stop if Empty Weight or Vehicle Type are Blank
    // 2. Get the user's birth month
    // 3. Calculate the number of months until the user's Birthday
    // 4. Calculate the monthSect value
    // 5. Calculate the ewSect value
    // 6. Lookup the Proof of Ownership Fees
    // 7. Lookup prorated Title Fees
});

相反，有了这个功能试图在一个地方完成所有这些任务，你最好移动任何＆＃34;专门的＆＃34;功能分为简单易懂的功能，每个功能都有明确的目的。您可以创建函数名称，如：

// Lookup the Prorated Fee
getProratedFeeFromFeeList(monthSect, vehicleBody, ewSect);

// Get the "Payment Plan Details" based on user's birth month
getPaymentPlanDetailsBasedOnBirthMonth(birthMonth);

// Lookup the ewSect (Empty Weight Section)
getWeightSectionFromVehicleClassAndEmptyWeight(vehicleClass, emptyWeight);

注意：我喜欢使用长的描述性函数名称，以便函数的目的非常明确，这提高了代码的可读性。如果您使用具有良好代码完成功能的代码编辑器，那么像这样的长函数名称不会添加大量额外的类型，但对我而言，我个人喜欢高度可读，自我记录的代码。

建议＃02：将表单值保存在一个地方。

继续提出建议＃1，因为你的表单意味着有一个＆＃34; live-tally＆＃34;如果你有一个系统设置来保存你的快照，它将为你省去很多麻烦你的形式的价值观始终如一。您可以使用Javascript对象轻松完成此操作。

由于多种原因，这很方便：

它使所有的表单值全球可用＆＃34;的无混乱全局命名空间。
它使您的表单值易于＆＃34;计算＆＃34;在你的 calculateTotal()函数，因为您只需要查询它一个价值的对象插入你的等式。
你有一个＆＃34;实时快照＆＃34;你的整个表格在任何时候。这是方便测试，调试，验证或打印表格结果到控制台或浏览器。
它允许您不断向费用计算器应用添加功能/值而不会破坏您的工作流程。
通过随时拥有完整的快照，可以更容易地发现功能上的错误，看看你的个人输入是怎样的影响其他输入或整体计算。

因此，我将创建一个名为FC的全局对象（＆＃34;费用计算器＆＃34;的缩写），以存储您运行费用计算所需的所有值。创建这个＆＃34;费用计算器对象＆＃34;像这样：

var FC = FC || {};

现在，所有可以访问FC范围的功能都可以使用此FC对象。向FC对象添加值可以通过以下两种方式之一完成：

// First method: In FC's Declaration
var FC = { monthSect: 0, vehicleBody: null };

// Second Method: Using dot notation
var FC = {};
FC.monthSect = 0;
FC.vehicleBody = null;

注意：请记住，您始终可以使用点表示法为已声明的对象指定值，因此这两种方法的组合完全有效。

现在，您可以使用点表示法更新和读取FC对象中的值，例如：

// Get the monthSect variable
var monthSect = FC.monthSect;

// Assign or update FC.monthSect
FC.monthSect = someNewValue;

我的问题解决方案

使用我上面提到的一些建议，这就是解决问题的方法：

步骤＃01：每个表单输入都会侦听更改，更新`FC`并调用`calculateTotal()`

// When the user updates the #month2 or #month3 dropdown
// Update FC.monthSect 
$(document).on('change', '#month2, #month3', function() {
    FC.monthSect = $(this).val();
    calculateTotal();
});

// When someone updates the Empty Weight value
// update FC.emptyWeight 
$(document).on('change blur keyup', '#ew', function() {

    var emptyWeight = $(this).val();
    FC.emptyWeight = emptyWeight ? emptyWeight : null;

    var vehicle = $('#vehiclebody').val();

    if (vehicle && emptyWeight) {
        FC.ewSect = FCUtils.getWeightSectionFromVehicleClassAndEmptyWeight(FC.vehicleBody, FC.emptyWeight);
         FCUtils.getProratedFeeFromFeeList(FC.monthSect, FC.vehicleBody, FC.ewSect);
    }

    calculateTotal();

});


// When the user updates the #month1 drop-down 
// Update FC.monthSect and assign FC.proratedPrice
$(document).on('change', '#month1', function() {

    // Reset to the defaults
    $("#month2").hide();
    $("#month3").hide();
    FC.monthSect = null;

    // ignore blank options
    if ($(this).val() == '') {
        calculateTotal();
        return;
    };

    var selecteduserBirthday = $(this).val();

    var paymentPlanDetails = FCUtils.getPaymentPlanDetailsBasedOnBirthMonth(selecteduserBirthday);
    var monthsToGo = paymentPlanDetails.monthsUntilBirthday;

    if (paymentPlanDetails.paymentPlan == "2or14months") {
        $("#month2").show();
    } else if (paymentPlanDetails.paymentPlan == "3or15months") {
        $("#month3").show();
    }

    // Assign FC.monthSect if monthSect = 4-12 | 1 | 13
    if (monthsToGo >= 4 && monthsToGo <= 12) {
        FC.monthSect = 4;
    } else if (monthsToGo == 1 || monthsToGo == 13) {
        FC.monthSect = 13;
    }

    FCUtils.getProratedFeeFromFeeList(FC.monthSect, FC.vehicleBody, FC.ewSect);
    calculateTotal();

});

注意：您可能已经注意到某些函数名称前面加上FCUtils，这是我附加了所有＆＃34;实用程序＆＃34;的对象。功能。您不一定需要在自己的程序中执行此操作，您可以像平常一样编写函数并调用它们，但在我的示例应用程序中，我使用了名为The Revealing Module Pattern的设计模式，这有助于将常用功能分组，这是使代码更具可读性的又一步。

步骤＃02：查询`FC`

calculateTotal()

现在您的表单输入是自包含的，并且他们都知道如何在FC对象上更新它们各自的值，所有calculateTotal()函数需要做的是查询是{{1}要计算的值的对象：

FC

由于每个＆＃34;更改＆＃34;都会调用function calculateTotal() { var titleFees = FC.rvPrice + FC.titlePrice + FC.lienPrice + FC.purchaseDatePrice + FC.IRFPrice + FC.proratedPrice + FC.specialFee; FC.totalPrice = titleFees; // Now you can update the browser with this data $("#totalPrice").text(titleFees); }函数。您的表单的事件，它是什么使您的表单＆＃34;生活＆＃34;感觉。您还可以在此功能中更新应用的其他部分。

您可以 review a jsfiddle where I put all these ideas into practice here 。我添加了一个HUD（＆＃34; Black Box＆＃34;出现在右上角），它将始终为您提供calculateTotal()对象中包含的数据的实时快照。如果HUD妨碍了事情的发生，那么只需点击“拖动”即可。它在屏幕周围移动它。

希望这有帮助！祝你好运！

Answer 2

当你不想手动输入一个巨大的IF-ELSE时，你是在正确的轨道上 - 如果它重复的话。（你已经错过了＆＃34; 0＆＃34;在最后一行，有时它是＆＃34;＆gt;＆＃34;有时＆＃34;＆gt; =＆＃34; :-)

您可以做的是设置一种方法来保存不同的阈值以及违反阈值时的值。所以代码不是用例而是算法。您甚至可以获得更多创意，例如将this.get = function(wt)更改为this.get = function(wt, default_value) 并插入默认值。等等。

var LevelFinder = function(){
    this.range = []; // always sorted when new values added
    this.add = function( over_wt, sel_value ) {
        this.range.push({over_wt:over_wt, sel_value:sel_value});
        this.range.sort(function(x,y){return x.over_wt - y.over_wt;});
    };
    this.get = function(wt){
        var x, i;
        for ( i = 0; i < this.range.length; ++i ) {
            if ( this.range[i].over_wt > wt ) {
                if ( i > 0 ) x = this.range[i-1].sel_value;
                return x;
            }
        }
        return this.range[i-1].sel_value;
    }
} ;
var ewFinder = new LevelFinder();
ewFinder.add(10000, 3);
ewFinder.add(20000, 5);
ewFinder.add(26000, 6);
ewFinder.add(15000, 4); // this is entered out of sequence but will get sorted by the adder

ewFinder.get(17000); // produces 4 in console
ewFinder.get(22000); // 5
ewFinder.get(0); // undefined
ewFinder.get(999000); // 6

HTH。

jQuery IF语句根据两个下拉列表和一个文本框字段计算费用

2 个答案:

建议＃01：整理您的代码

建议＃02：将表单值保存在一个地方。

我的问题解决方案

步骤＃01：每个表单输入都会侦听更改，更新`FC`并调用`calculateTotal()`

步骤＃02：查询`FC`

jQuery IF语句根据两个下拉列表和一个文本框字段计算费用

2 个答案:

建议＃01：整理您的代码

建议＃02：将表单值保存在一个地方。

我的问题解决方案

步骤＃01：每个表单输入都会侦听更改，更新FC并调用calculateTotal()

步骤＃02：查询FC

步骤＃01：每个表单输入都会侦听更改，更新`FC`并调用`calculateTotal()`

步骤＃02：查询`FC`