これはHTMLコードです：
<input type="number" class="small" value="0" step="any" id="input_1_0" name="input_25">
<input type="number" class="small" value="0" step="any" id="input_1_1" name="input_26">
<input type="number" class="small" value="0" step="any" id="input_1_2" name="input_27">
<p><b>Total:</b> <span id="total_cost">0</span></p>
これはjQueryです：
var total_cost;
jQuery(document).ready(function(){
jQuery('input').change(function() {
var input1 = Number((jQuery('#input_1_0').val()).replace(/[^0-9\.]+/g,""));
var input2 = Number((jQuery('#input_1_1').val()).replace(/[^0-9\.]+/g,""));
var input3 = Number((jQuery('#input_1_2').val()).replace(/[^0-9\.]+/g,""));
total_cost = input1 + input2 + input3;
});
jQuery(function(){
jQuery('#total_cost').text(total_cost);
});
});
何らかの理由で、入力フィールドに数値を入力しても合計が更新されません。どんな助けでもいただければ幸いです。
このコードは非同期で実行されるためです。changeが起動されたときに変数を更新し、その結果として何かを更新したいのですが、その2番目のjQuery関数を呼び出すものは何もありません。ドキュメントの準備ができた後、1回実行されます。実行はイベントをバインドし、次にその2番目のjQueryIIFEを1回実行します。なぜそれが独自の機能で必要なのかさえわかりません。これを行うだけです：
jQuery(document).ready(function(){
jQuery('input').change(function() {
var input1 = Number((jQuery('#input_1_0').val()).replace(/[^0-9\.]+/g,""));
var input2 = Number((jQuery('#input_1_1').val()).replace(/[^0-9\.]+/g,""));
var input3 = Number((jQuery('#input_1_2').val()).replace(/[^0-9\.]+/g,""));
var total_cost = input1 + input2 + input3;
jQuery('#total_cost').text(total_cost);
});
});
これはあなたの質問に正確に答えるものではないので、これがあなたの基準でそれを達成する方法です。
jQuery(document).ready(function() {
var total_cost = 0;
var update_total_cost = function() {
jQuery('#total_cost').text(total_cost);
};
jQuery('input').change(function() {
var input1 = Number((jQuery('#input_1_0').val()).replace(/[^0-9\.]+/g,""));
var input2 = Number((jQuery('#input_1_1').val()).replace(/[^0-9\.]+/g,""));
var input3 = Number((jQuery('#input_1_2').val()).replace(/[^0-9\.]+/g,""));
total_cost = input1 + input2 + input3;
update_total_cost();
});
});
これは、更新テキスト関数に名前を付け、イベントの発生後に呼び出すために機能します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加