javascript - javascript - 複数の html #ID を検索して関数に渡す

Question

ボタンをクリックしてフィールドを追加できる注文フォームがあります。注文価格を合計するバックエンド JavaScript を実行していますが、総計スクリプトがわかりません。

私の問題は、DOM 全体を検索し、次のパターンに一致する ID を持つものがいくつあるかを見つけるスクリプトが必要なことです。

totprice01 totprice02 totprice03 totprice(n)

私はこの正規表現で遊んでいますが、運が悪いのではないかと心配しています:

matchStr = new RegExp("\\btotprice\\d{2}\\b", "gi");

すべての HTML ID の配列を取得したら、それらを関数に渡す必要があります。この関数は、これまでのところ次のようになっています。少なくとも動的ではなく、すべてハードコードされていることに注意してください。

document.getElementById('totpricetot').value = Math.round((parseFloat(document.getElementById('totprice1').value)+parseFloat(document.getElementById('totprice2').value)+parseFloat(document.getElementById('totprice3').value)+parseFloat(document.getElementById('totprice4').value)+parseFloat(document.getElementById('totprice5').value)+parseFloat(document.getElementById('totprice6').value)+parseFloat(document.getElementById('totprice7').value)+parseFloat(document.getElementById('totprice8').value)+parseFloat(document.getElementById('totprice9').value)+parseFloat(document.getElementById('totprice10').value))*100)/100;

これを式+関数に入れて、すべての値の合計を返すのを手伝ってくれる人はいますか?

どうもありがとう！

編集

OK、プレーンな古いjavascriptを使用するだけで捨てることにしました-JQueryです！以下の例のいくつかを使用してこのコードをまとめましたが、誰かがデバッグを手伝ってくれませんか?

<input id="totprice08" onChange="totChange()" class="total_field" />
<input id="totprice09" onChange="totChange()" class="total_field" />
<input id="totprice10" onChange="totChange()" class="total_field" />
etc...
<input id="totpricetot" value="0.00" name="totpricetot" />

jQuery(function($) {
  function totChange() {
    var sum=0;
    $('.total_field').each(function() {
        sum += $( this ).val () * 1;
    } );
    $('#totpricetot').val(sum);
  }
});

score 3 · Accepted Answer

SO に関するすべての JavaScript の質問に対して、「jQuery を使用してください」と答える方法が気に入っています...

とにかく...普通のJavaScriptでもできます：

var inputs = document.getElementsByTagName("input");
var priceInputs = [];
for (var i=0, len=inputs.length; i<len; i++) {
    if (inputs[i].tagName.indexOf("totprice") > -1) {
        priceInputs[priceInputs.length] = parseInt(inputs[i].value);
    }
}
calcTotal(priceInputs);

次に、配列をループして合計する関数を作成します (:

score 2 · Accepted Answer

解決策はたくさんあります。問題のすべての要素に同じクラス名を付けて jQuery (または類似のもの) を使用する以外に、JavaScript 変数の要素の総数を単純に覚えておくこともできます。それは可能でしょうか？私は知っています-それは一種の古い学校の解決策です。jQuery やその他の JavaScript ライブラリを使用していることを示していないため、jQuery の方が適している可能性があります。

編集：より明確にするために：

// your variable, updated every time you add/remove a new field
var fieldsCount; 

// whenever you need to do anything with all the fields:
for (var i = 0; i < fieldsCount; i++)
{
    var field = document.getElementById("totprice" + i);
    // ...
}

score 1 · Accepted Answer

クラスを合計するために必要な入力を与えてから、そのクラス名でそれらの入力を取得します (jQuery または他のフレームワークがここで役立ちます)。

jQuery を使用する場合は、次のようなことができます。

function calculateSum () {
    var sum = 0;
    $( '.YourClass' ).each ( function () {
        sum += $( this ).val () * 1;
    } );

    return sum;
}

score 1 · Accepted Answer

jQuery を使用すると、次のように要素を選択して合計できます。

var sum = 0;
$('[id^=totprice-]').each(function()
{
    sum += $(this).val();
});

score 0 · Accepted Answer

すべての合計価格要素に同じ CSS クラスを与えてから、このクラスのすべての要素を取得できます (JQuery を使用すると便利で簡単です)。

score -1 · Accepted Answer

-1

各要素にクラスを与え、jQuery を使用します。

于 2009-10-08T11:54:03.150 に答える

javascript - javascript - 複数の html #ID を検索して関数に渡す

6 に答える 6

Related

Reference