更改功能是否可以触发多次？

Question

我正在尝试创建一个动态表单，该表单在每次更改4个输入字段之一时都会重新计算值。 至今..

<script type="text/javascript"><!--//--><![CDATA[//><!--
jQuery(document).ready(function(jQuery){ ...variables...

那我有..

jQuery('.changeCalc').change(function()
{
    calculations();
});

我正在使用change函数重新执行我创建的计算函数。 问题是，当我对此进行测试时，我更改了四个字段中的任何一个并执行了calculations()函数。 问题：每次页面加载仅执行一次。 是否可以更改此设置以使其多次触发？

相关HTML：

<input type="text" name="managed_properties" id="managed_properties" class="changeCalc"     required />
<input type="text" name="inspections_peryr" id="inspections_peryr" value="" class="changeCalc" required />
<select name="time_reports" id="time_reports" class="changeCalc" required>
  <option value="20">20 minutes</option>
  <option value="30">30 minutes</option>
  <option value="45">45 minutes</option>
  <option value="1">1 hour</option>
  <option value="2">2 hours</option>
</select>
<select name="prop_managers" id="prop_managers" class="changeCalc" required>
  <option value="15">$15</option>
  <option value="20">$20</option>
  <option value="25">$25</option>
  <option value="30">$30</option>
  <option value="40">$40</option>
  <option value="50">$50</option>
</select>

编辑：到目前为止，答案还没有奏效，所以也许显示计算功能可以为这里的真正问题提供一些启示。

calculations = function()
{

//Perform the calculations
if (noProp != null && noTimesInsp != null && timeCompile != null && rateManager != null)
{
// Step 2 per year
saveHrYr = timeCompile * (noProp * noTimesInsp);
saveDollarYr = ((rateManager * (timeCompile * (noProp * noTimesInsp))) * (noProp * .17))
ROI = ((rateManager * (timeCompile * (noProp * noTimesInsp))) / ((noProp * .17)*12))
//Display the answer
var displaySaveHrYr = document.getElementById('snapSvHrYr');
jQuery('#snapSvHrYr').empty();
displaySaveHrYr.innerHTML = displaySaveHrYr.innerHTML + saveHrYr.toFixed(0);
var displaySaveDollarYr = document.getElementById('snapSvDollarYr');
jQuery('#snapSvDollarYr').empty();
displaySaveDollarYr.innerHTML = displaySaveDollarYr.innerHTML + saveDollarYr.toFixed(0);
var displayROI = document.getElementById('backPerDollar');
jQuery('#backPerDollar').empty();
displayROI.innerHTML = displayROI.innerHTML + ROI.toFixed(0);
// Step 2 per month
saveHrMth = (timeCompile * (noProp * noTimesInsp)/12);
saveDollarMth = ((rateManager * (timeCompile * (noProp * noTimesInsp))) * (noProp * .17))/12
var displaySaveHrMth = document.getElementById('snapSvHrMth');
jQuery('#snapSvHrMth').empty();
displaySaveHrMth.innerHTML = displaySaveHrMth.innerHTML + saveHrMth.toFixed(0);
var displaySaveDollarMth = document.getElementById('snapSvDollarMth');
jQuery('#snapSvDollarMth').empty();
displaySaveDollarMth.innerHTML = displaySaveDollarMth.innerHTML + saveDollarMth.toFixed(0);
//SnapInspect cost per yr/mth
snapCostMth = noProp * .17
snapCostYr = snapCostMth * 12
var displaySnapCostYr = document.getElementById('snapCostYr');
jQuery('#snapCostYr').empty();
displaySnapCostYr.innerHTML = displaySnapCostYr.innerHTML + snapCostYr.toFixed(0);
var displaySnapCostMth = document.getElementById('snapCostMth');
jQuery('#snapCostMth').empty();
displaySnapCostMth.innerHTML = displaySnapCostMth.innerHTML + snapCostMth.toFixed(0);
}
};

Answer 1

您可以这样做：

$(function(){
    calculations = function($this){
        if($this) alert($this.val())
    }
    $('body').on('blur', 'input[type=text]', function(){
        calculations($(this));
    });

    calculations();
});

检查这个小提琴

Answer 2

我可能会做这样的事情：

$(function() {
    var calc = function () {
        //perform calculations here
    };
    $('input.changeCalc').on('blur', calc);
    $('select.changeCalc').on('change', calc).eq(0).trigger('blur');
});

编辑...

阻止多次执行bing的最可能的情况是if(noProp ...)条件。

您需要注意，在javasacript中， foo != null与foo != 0相同。 因此，如果变量noProp ， noTimesInsp ， timeCompile或rateManager一个为零，则将不执行计算。

为了接受变量类型，您必须使用===或!==进行测试。

应用!==并进一步利用jQuery将产生以下结果：

var calc = function() {
    if(noProp !== null && noTimesInsp !== null && timeCompile !== null && rateManager !== null) {
        var saveHrYr = timeCompile * (noProp * noTimesInsp);
        var saveDollarYr = ((rateManager * (timeCompile * (noProp * noTimesInsp))) * (noProp * .17));
        var ROI = ((rateManager * (timeCompile * (noProp * noTimesInsp))) / ((noProp * .17) * 12));
        jQuery('#snapSvHrYr').text(saveHrYr.toFixed(0));
        jQuery('#snapSvDollarYr').text(saveDollarYr.toFixed(0));
        jQuery('#backPerDollar').text(ROI.toFixed(0));

        var saveHrMth = (timeCompile * (noProp * noTimesInsp)/12);
        var saveDollarMth = ((rateManager * (timeCompile * (noProp * noTimesInsp))) * (noProp * .17))/12;
        jQuery('#snapSvHrMth').text(saveHrMth.toFixed(0));
        jQuery('#snapSvDollarMth').text(saveDollarMth.toFixed(0));

        var snapCostMth = noProp * .17;
        var snapCostYr = snapCostMth * 12;
        jQuery('#snapCostYr').text(snapCostYr.toFixed(0));
        jQuery('#snapCostMth').text(snapCostMth.toFixed(0));
    }
};

如果仍然遇到相同的问题，则必须另加一些代码来分离事件处理程序。

编辑2

这是将四个“ val”语句移至calculations() ：

jQuery(function($) {
    var calculations = function() {
        var noProp = parseInt($('#managed_properties').val()) || 0;
        var noTimesInsp = parseInt($('#inspections_peryr').val()) || 0;
        var timeCompile = $('#time_reports').val();
        var rateManager = $('#prop_managers').val();

        var saveHrYr = timeCompile * (noProp * noTimesInsp);
        var saveDollarYr = ((rateManager * (timeCompile * (noProp * noTimesInsp))) * (noProp * .17))
        var ROI = ((rateManager * (timeCompile * (noProp * noTimesInsp))) / ((noProp * .17)*12))
        $('#snapSvHrYr').text(saveHrYr.toFixed(0));
        $('#snapSvDollarYr').text(saveDollarYr.toFixed(0));
        $('#backPerDollar').text(ROI.toFixed(0));

        var saveHrMth = (timeCompile * (noProp * noTimesInsp)/12);
        var saveDollarMth = ((rateManager * (timeCompile * (noProp * noTimesInsp))) * (noProp * .17))/12
        $('#snapSvHrMth').text(saveHrMth.toFixed(0));
        $('#snapSvDollarMth').text(saveDollarMth.toFixed(0));

        var snapCostMth = noProp * .17
        var snapCostYr = snapCostMth * 12
        $('#snapCostYr').text(snapCostYr.toFixed(0));
        $('#snapCostMth').text(snapCostMth.toFixed(0));
    };
    $('input.changeCalc').on('blur', calculations);
    $('select.changeCalc').on('change', calculations).eq(0).trigger('blur');
});