0

asp.net を使用して、多数のテキスト ボックスのセットで構成されるページをレンダリングしています。

グループの数は顧客に依存するため、私が管理することはできません.

私が望むのは、グループ内の入力ボックスの値が変更されると、そのグループの結果ボックスがグループの合計を合計するように変更され、背景の色も変更されるようにすることです。

以下のように、1セットのプロトタイプでこれを機能させました。

function calculateSetColour(i) {
        var total = 0;

        $(".answer").each(function () {
            if (!isNaN(this.value) && this.value.length != 0) {
                total += parseFloat(this.value);           
            }
        });


        $(".result").val(total);
        $(".answer").addClass(calculateColour(total));
    }

しかし、私はそれをグループで機能させることができないようです。たとえば、2 番目のセレクターを追加する必要があると想定しているので、使用できます。

$(.answer .group" + i).each ..

ここで、i は各グループにプログラムで追加された ID です。しかし、アラート ステートメントを関数内に配置すると、関数がヒットされていないことが示されるため、構文が間違っており、セレクターが一致していないと思われます。

私のアプローチは正しいですか?変数をクラスセレクターに組み込む正しい構文は何ですか? (クラス セレクターは、.net が ID と名前をマングルできるため、最も安全です)

要求どおり、html は次のようになります。

 <div class="reportItem">
            TOTAL UNITS DELIVERED<BR />
        <span id="ctl00_ContentPlaceHolder1_rptdG_ctl01_Name">Site A</span>
        <div class="l1" >New</div><div class="l2"><input name="ctl00$ContentPlaceHolder1$rptdG$ctl01$tbNew" type="text" id="ctl00_ContentPlaceHolder1_rptdG_ctl01_tbNew" class="answer" onblur="calculateSetColour(1);" /></div> <br />
        <div class="l1" >Used</div> <div class="l2"><input name="ctl00$ContentPlaceHolder1$rptdG$ctl01$tbUsed" type="text" id="ctl00_ContentPlaceHolder1_rptdG_ctl01_tbUsed" class="answer"  onblur="calculateSetColour(1);" /></div>
        <div class="l1" >Compliance</div> <div class="l2"><input name="ctl00$ContentPlaceHolder1$rptdG$ctl01$tbCompliant" type="text" id="ctl00_ContentPlaceHolder1_rptdG_ctl01_tbCompliant" class="result" /></div>
            </div>


                    <div class="reportAltItem">
                        TOTAL UNITS DELIVERED<BR />
        <span id="ctl00_ContentPlaceHolder1_rptdG_ctl02_DlrName">Site 2</span>
    <div class="l1" >New</div><div class="l2"><input name="ctl00$ContentPlaceHolder1$rptdG$ctl02$tbNew" type="text" id="ctl00_ContentPlaceHolder1_rptdG_ctl02_tbNew" class="answer" onblur="calculateSetColour(2);"/></div>
    <div class="l1" >Used</div><div class="l2"><input name="ctl00$ContentPlaceHolder1$rptdG$ctl02$tbUsed" type="text" id="ctl00_ContentPlaceHolder1_rptdG_ctl02_tbUsed" class="answer" onblur="calculateSetColour(2);"/></div>
                        <div class="l1" >Compliance</div> <div class="l2"><input name="ctl00$ContentPlaceHolder1$rptdG$ctl02$tbCompliant" type="text" id="ctl00_ContentPlaceHolder1_rptdG_ctl02_tbCompliant" class="result" /></div>
            </div>
4

2 に答える 2

0

編集済み：

function calculateSetColour(input) {
    var total = 0;

    var outerDiv = $(input).parent().parent();
    outerDiv.find(".answer").each(function () {
        if (!isNaN(this.value) && this.value.length != 0) {
            total += parseFloat(this.value);           
        }
    });


    outerDiv.find(".result").val(total);
    outerDiv.find(".result").addClass(calculateColour(total));
}

それからそれを呼んでください：

<div class="reportItem">
        TOTAL UNITS DELIVERED<BR />
    <span id="ctl00_ContentPlaceHolder1_rptdG_ctl01_Name">Site A</span>
    <div class="l1" >New</div><div class="l2"><input name="ctl00$ContentPlaceHolder1$rptdG$ctl01$tbNew" type="text" id="ctl00_ContentPlaceHolder1_rptdG_ctl01_tbNew" class="answer" onblur="calculateSetColour(this);" /></div> <br />
    <div class="l1" >Used</div> <div class="l2"><input name="ctl00$ContentPlaceHolder1$rptdG$ctl01$tbUsed" type="text" id="ctl00_ContentPlaceHolder1_rptdG_ctl01_tbUsed" class="answer"  onblur="calculateSetColour(this);" /></div>
    <div class="l1" >Compliance</div> <div class="l2"><input name="ctl00$ContentPlaceHolder1$rptdG$ctl01$tbCompliant" type="text" id="ctl00_ContentPlaceHolder1_rptdG_ctl01_tbCompliant" class="result" /></div>
        </div>
于 2013-01-31T16:45:24.853 に答える