jQuery高亮效果意外刷新页面

Question

我有一个如下所示的表单：

<form id="addClassesToDoc" action="">
    <table id="classesTable" style="border-collapse: collapse" cellpadding="3">
        <thead>
            <tr style="background-color: #a04a56; color: #ffffff;">
                <td width="50px"></td>
                <td width="75px"><b>Class<br />Number</b></td>
                <td width="500px"><b>Class Name</b></td>
            </tr>
        </thead>
        <tbody>
            <tr bgcolor="#EFE5D3">
                <td align="center"><input type="checkbox" class="chkAddClass" name="classesToAddToDoc[]" value="45" /></td>
                <td>PHB7075</td>
                <td>Organizational Systems and Leadership </td>
            </tr>
            <tr bgcolor="">
                <td align="center"><input type="checkbox" class="chkAddClass" name="classesToAddToDoc[]" value="126" /></td>
                <td>TEST111</td>
                <td>Test add new class</td>
            </tr>
        </tbody>
    </table>
</form>

我正在使用此代码验证是否在 $.ajax() 调用之前检查了任何复选框：

var classesToAddToDoc = new Array();
if ($('input.chkAddClass:checked').length > 0) {
    // At least one class checked
    // Get the id(s) of the checked class(es)
    $.each($('#classesTable input[name="classesToAddToDoc[]"]:checked'), function() {
        classesToAddToDoc.push($(this).attr('value'));
    });
} else {
    // No docs checked
    //alert('Please check at least one class to add to the selected document.');
    $.each($('#classesTable input[type="checkbox"]').parent().effect('highlight',{color: '#A04A56'},1500));
    return false;
}

在 else 子句中，当我取消注释警告并且注释了突出显示行时，警告显示并且页面保持在同一位置。

但是当我注释掉alert，取消注释高亮行时，页面刷新，复选框单元格高亮，地址栏添加表单参数，类似这样：

[pageAddress]?docsList=46&submitAddClassesToDoc=Add+Checked+Classes+to+Selected+Document

为什么突出显示会这样做，我该如何阻止它？

Answer 1

我不确定如何更改每个部分 - 我仍在研究 jQuery 基础知识

当然，我至少可以告诉你如何清理它：

var classesToAddToDoc;
if ($('input.chkAddClass:checked').length)
{
    // At least one class checked
    // Get the id(s) of the checked class(es)
    classesToAddToDoc = $('#classesTable input[name="classesToAddToDoc[]"]:checked').map(function ()
    {
        return $(this).val(); // probably want .val() over .attr('value')
    }).get();
}
else
{
    // No docs checked
    //alert('Please check at least one class to add to the selected document.');
    $('#classesTable input:checkbox').parent().effect('highlight',{color: '#A04A56'},1500));
    return false;
}

此外，我在 .each() 文档中看到的示例中包含函数 - 在我的情况下如何使用它？

类似

$('some selector here').each(function (index, element)
{
    // do something for each element

    // index is the current index of iteration
    // this and element are references to the current element
});

在您的特定情况下，您实际上根本不需要 .each()。