Question

我正在使用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>

Answer 1

为组提供相同的类名并包含组+ id（例如，组可能代表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));
}

Answer 2

编辑：

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>

Jquery选择文本框的子集

2 个答案: