0

4 つの入力フィールドのいずれかが変更されるたびに値を再計算する動的フォームを作成しようとしています。ここのところ..

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

で、〜がある..

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

変更機能を使用して、作成した計算機能を再実行しています。問題は、これをテストするときに、4 つのフィールドのいずれかを変更するとcalculations()機能が実行されることです。問題: ページの読み込みごとに 1 回しか実行されません。これを変更して複数回起動することはできますか?

関連する 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、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

4 つの「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 に答える