Question

我正在尝试创建一个动态表单，每次更改4个输入字段中的一个时重新计算值。到目前为止..

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

然后我有..

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

我正在使用更改功能重新执行我创建的计算功能。问题是，当我测试它时，我更改了四个字段中的任何一个，并执行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();
});

选中此fiddle

Answer 2

我可能会这样做：

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

编辑......

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

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

为了将变量 type 变为accounnt，您必须使用===或!==进行测试。

应用!==并进一步利用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

以下是在calculations()内移动了四个“val”语句的代码：

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');
});

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

2 个答案:

编辑......

编辑2