0

我正在开发一个评估系统。页面上有许多“questionItem”块。目标是确定 answers[2].SetAnswer 或 answers[2].Answer 设置为空字符串或?并突出显示标题(项目)。当用户更改问题时,删除突出显示。

它有效,我只是在寻找如何改进它。这是一个块:

$<div class="questionItem">
    <input data-val="true" data-val-number="The field MappingId must be a number." data-val-required="The MappingId field is required." id="answers_2__MappingId" name="answers[2].MappingId" type="hidden" value="24" />
    <input id="answers_2__Item" name="answers[2].Item" type="hidden" value="B0300" />
    <input id="answers_2__OldAnswer" name="answers[2].OldAnswer" type="hidden" value="^" />
    <input id="answers_2__SetAnswer" name="answers[2].SetAnswer" type="hidden" value="^" />
    <h3 class="item">B0300</h3>
    Hearing aid<br/>
    <select class="hyperSwap" id="answers_2__Answer" name="answers[2].Answer">
        <option selected="selected" value="?">(select item)</option>
        <option value="0">(0) No</option>
        <option value="1">(1) Yes</option>
        <option value="-">(-) Not assessed</option>
    </select>
</div>

<div class="questionItem">
    <input data-val="true" data-val-number="The field MappingId must be a number." data-val-required="The MappingId field is required." id="answers_11__MappingId" name="answers[11].MappingId" type="hidden" value="228" />
    <input id="answers_11__Item" name="answers[11].Item" type="hidden" value="C0900A" />
    <input id="answers_11__OldAnswer" name="answers[11].OldAnswer" type="hidden" value="0" />
    <input id="answers_11__SetAnswer" name="answers[11].SetAnswer" type="hidden" value="?" />
    <h3 class="item">C0900A</h3>
    Staff asmt mental status: recall current season <br/>
    <div class="questionCheckbox"><input id="C0900A_0" name="answers[11].Answer" type="radio" value="0" /> (0) Not checked (No)</div>
    <div class="questionCheckbox"><input id="C0900A_1" name="answers[11].Answer" type="radio" value="1" /> (1) Checked (Yes)</div>
    <div class="questionCheckbox"><input id="C0900A_-" name="answers[11].Answer" type="radio" value="-" /> (-) Not assessed</div>
</div>

这是我想出的jQuery代码:

$function highlightUnanswered() {
    var coll = $(".questionItem").filter(function () {
        return $(this).find(":input").filter(function () {
            return (/^answers\[\d+\]\.SetAnswer$/.test(this.name) && this.value == "?") ||
                           ((/^answers\[\d+\]\.Answer$/.test(this.name) && this.value == "?") &&
                            (/^answers\[\d+\]\.Answer$/.test(this.name) && this.value == ""));
        }).length > 0;
    });

    coll.find(".item").addClass("unanswered");
    coll.find(":input").change(function (e) { $(this).parent().find(".item").removeClass("unanswered"); });
}

有两个问题:

Q1:最后一行,如果我没记错的话,处理程序被添加到所有输入中,包括隐藏的。如何将其连接到答案[#].Answer 输入?

Q2:这个表单上的某个人给了我第一个查询,该查询提出了不同功能的初始集合。我明白它在做什么,但我不明白如何: /^answers[\d+].Answer$/.test(this.name) 怎么了?为什么最后有一个 .length() > 0 ?

4

1 回答 1

1

Q1:

coll.find(":input").filter(function(){
  return (/^answers\[\d+\]\.Answer$/.test(this.name);
}).addClass('unanswered');

Q2:

http://api.jquery.com/filter/说:“对于每个元素,如果函数返回 true(或“真实”值)”,那么过滤函数可以简单地返回.length:0 是假的,其他数字是真实的.

/^answers[\d+].Answer$/是一个正则表达式:

https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions

.test(this.name)检查当前处理的输入名称是否与所需格式匹配。

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/RegExp/test

于 2012-06-29T14:58:30.203 回答