0

我正在尝试创建一个动态表单，每次更改 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);
}
};
4

2 回答 2

1

你可以这样做：

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

    calculations();
});

检查这个小提琴

于 2013-06-08T01:09:00.367 回答
0

我可能会做这样的事情：

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

编辑 ...

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

您需要注意，在 javasacriptfoo != null中与foo != 0. 因此，如果任何变量noProp、或为零，则不会执行计算。noTimesInsptimeCompilerateManager

为了将变量类型记入帐户，您必须使用===or进行测试!==。

应用!==和进一步利用 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');
});
于 2013-06-08T01:36:00.850 回答