1

jqueryを使用して非常に基本的な入力フィールド計算機を作成しました。これは、特定のhtml入力フィールドを計算し、合計を以下の入力に出力します。

これは、jqueryイベント（キーアップ、変更など）が呼び出されたときに想定されるように機能します。ただし、SESSION変数またはPOST変数から入力フィールド値を設定する必要がある場合があります。

このような：

echo "<div class='calculate_data' data-amount='". $x[$i] ."'>". $y[$i] ."</div>";
echo "<input class='calculate_input' name='input_".$i."' type='text' value='". @$_POST['input_'.$i]."' />";
echo "<input id='total' type='text' disabled='disabled' />";

次に、計算機はページの読み込み時にこれらの値を計算する必要があります。私はほとんどすべてのイベントを試しましたが、スクリプトは計算しません：

$(document).ready(function() {
    $('.calculate_input').bind("click mouseover keyup change focus load on ready", function() {
        var sum = 0;

        //Sum up
        $('.calculate_input').each(function() {
            sum += Number($(this).val() * $(this).prev('.calculate_data').attr('data-amount'));
        }

        //Set the sum of all the previous fields to the #total field    
        $('#total').val(sum);
        if($('#total').val() == "NaN"){
            $('#total').val("-");
        }
    });
});

タスクはどのjQueryイベントメソッドを実行しますか、または何か間違ったことをしましたか？

4

2 に答える 2

0

それほど多くのイベント タイプを使用する必要はありません。ページの読み込みと変更時にのみ必要です。jQuery はページの読み込み時に既に実行されているはずなので、ステートメントの外でトリガーするだけです。

UPDATE jQueryの変更に応じて変更されました

 $(document).ready(function() {
    $('.calculate_input').bind("change", function() {
        var sum = 0;

        //Sum up
        $('.calculate_input').each(function() {
            sum += Number($(this).val() * $(this).prev('.calculate_data').attr('data-amount'));
        }

        //Set the sum of all the previous fields to the #total field    
        $('#total').val(sum);
        if($('#total').val() == "NaN"){
            $('#total').val("-");
        }
    });
 $('.calculate_input').trigger('change'); //when the document is ready, trigger the change
});
于 2012-12-04T16:38:21.597 に答える
0

ページの読み込み時にそれが発生すると予想される場合は、イベントを明示的にトリガーします。

これを試すことができます

$('.calculate_input').click();

また、私の知る限り、イベントではないイベントの準備ができています..

$('.calculate_input').on("click mouseover keyup change focus load ",

イベントを添付する.on()代わりに使用.bind()

コードはDOM Readyハンドラ内に含める必要があります

于 2012-12-04T16:34:06.703 に答える