Question

我正在研究评估系统。页面上有许多'questionItem'块。目标是确定答案[2] .SetAnswer或答案[2]。答案设置为空字符串或？并高亮标题（项目）。当用户更改问题时，请删除突出显示。

它有效，我只是在寻找我可以如何改进它。这是一个街区：

$<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：最后一行，如果我没有弄错，处理程序将被添加到所有输入，包括隐藏的输入。如何将其连接到答案[＃]。回答输入？

Q2：此表单上的某个人给了我第一个查询，该查询为不同的功能提供了初始集合。我明白它在做什么，但我不明白：怎么了/^answers [\ d+] .Answer $ /。test（this.name）？为什么有.length（）＆gt; 0结尾？

Answer 1

Q1：

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

Q2：

http://api.jquery.com/filter/说：“对于每个元素，如果函数返回true（或”truthy“值）”，那么过滤函数可以简单地返回.length：0是假的，其他数字是truthy。

/^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

使用jQuery查找特定输入

1 个答案: