javascript - jQuery/Javascript - 自行运行脚本函数

Question

考虑以下因素:

我有 2 <div>

<div class="panel-body">
    //some parent class for each textbox
    <input type="text" class="required" id="txtA"></input>
    <input type="text" class="required" id="txtB"></input>
    <button class="submitButton">A</button>
</div>

<div class="panel-body">
    //some parent class for each textbox
    <input type="text" class="required" id="txtC"></input>
    <input type="text" class="required" id="txtD"></input>
    <input type="text" class="required" id="txtE"></input>
    <button class="submitButton">B</button>
</div>

和我的 jQuery 代码:

$(document).ready(function () {
    $('.submitButton').click(function (e) {
        var errorLess = true;
        $(".TextError").remove();
        $(".required").each(function () {
            $(this).parent().parent().removeClass("has-error");
            if ($(this).val() == "") {
                $(this).parent().parent().addClass("has-error");
                $('<span class=\"TextError\">This field is required!</span>').insertAfter(this);
                errorLess = false;
            }
        });
        return errorLess;
    });
});

当单击包含的按钮时，如何才能在某种程度上仅验证 div 中的字段？

意思是，当我点击按钮A时，它只会验证 txtA和txtB 。当我点击按钮B时，它将验证 txtC , txtD ，和txtE ？

我必须如何修改 jQuery 代码才能使其以这种方式工作？

Answer 1

您可以使用.closest()带选择器".panel-body"选择.parentElement.parentElement相对于当前.submitButton 。设置context的jQuery()调用哪里".required"是选择器。

不确定$(this).parent().parent().removeClass("has-error");的目的是什么.each()内调用循环？

$(document).ready(function () {
    $('.submitButton').click(function (e) {
        var errorLess = true;
        $(".TextError").remove();
        var closestPanel = $(this).closest(".panel-body");
        $(".required", closestPaenl).each(function () {
            // $(this).parent().parent().removeClass("has-error");
            if ($(this).val() == "") {
                $(this).parent().parent().addClass("has-error");
                $('<span class=\"TextError\">This field is required!</span>').insertAfter(this);
                errorLess = false;
            }
        });
        return errorLess;
    });
});