0

我正在使用 asp.net 来呈现由大量文本框组成的页面。

组的数量取决于客户，因此不在我的控制范围内。

我想要的是，当组中的输入框中的值发生更改时，该组的结果框会更改为该组的总和，并更改背景颜色。

我已经为一组原型工作，如下所示。

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));
    }

但我似乎无法让它为团体工作。我假设我需要添加第二个选择器，所以我可以使用

$(.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

为 Group 提供相同的类名并包括 group + id（例如 group 可能代表 10 个输入）。将 group + id 放在输入的 lang 属性中...

//example: <input class='group group1' lang='group1' />
//on blur get lang and pass that specific group. 
$(".group").blur(function () {
  var thisgroup = $(this).attr("lang");
calculateSetColour(thisgroup);

});

将组名传递给函数。此时我们知道存在 group1 类。每个看起来像这样：

function calculateSetColour(group) {
    var total = 0;

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


    $(".result").val(total);

    //update the color for this specific group...
    $("." + group).addClass(calculateColour(total));
}
于 2013-01-31T16:07:57.223 回答
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 回答