javascript - jQuery:如何将表单元素上的事件监听器范围限制到它们自己的表单？

Question

所以我在一个页面上有多个表单。除了可能包含的数据之外，每个表单都是相同的。我正在监听对特定元素的更改，这些更改应该修改同一表单中的其他元素，但我无法弄清楚如何在其自己的表单中确定这些操作的范围。这是我到目前为止所得到的:

var ContactSponsor = new function(){

    this.init = function(){
        $('#SponsorStatus_ID').change(SponsorStatusChanged);
    };

    var SponsorStatusChanged = function(){

        var $form = $(this).closest('form');
        var selectedValue = $(this).find('option:selected').text();

        if (selectedValue == 'Executed Contract') {
            markFieldRequired('#NumVAPs', $form);
            markFieldRequired('#SponsorWebsiteLevel_ID', $form);
            autoFillFieldWithCurrentDate('#ContractDate', $form);
        } else {
            markFieldNotRequired('#NumVAPs', $form);
            markFieldNotRequired('#SponsorWebsiteLevel_ID', $form);
        }
    };

    var markFieldRequired = function(fieldID, $form){
        $(fieldID, $form).siblings('label').addClass('required');
    };

    var markFieldNotRequired = function(fieldID, $form){
        $(fieldID, $form).siblings('label').removeClass('required');
    };

    var autoFillFieldWithCurrentDate = function(fieldID, $form){
        if ($(fieldID, $form).val() == '' || $(fieldID, $form).val() == '0000-00-00') {
            $(fieldID, $form).val(getCurrentDate());
        }
    };
};

此外，我还将表单传递给每个方法。不确定是否有一种方法可以做到这一点，而无需每次都传递它。

Answer 1

您似乎使用了重复的 ID。这可能会引起问题。不要让每个 FORM 包含带有 id=NumVAPs 的输入，而是删除 ID，然后按名称定位字段，例如$form.find('[name=NumVAPs]')。

嘿，当我们这样做时，您可能希望将 markFieldRequired 和 markFieldNotRequired 函数合并到一个接受的 setFieldRequired 中一个 bool 值，指示该字段是否为必填字段。

此外，如果将字段标记为必填纯粹是装饰性的，您可能需要考虑使用一些 CSS 来处理它。例如:

var SponsorStatusChanged = function(){
    var $this = $(this);

    if($this.val() == 'Executed Contract') {
        $this.closest('form').addClass('executed');
    }
}

然后，添加此 CSS:

form.executed label.required-for-executed {
    /* whatever rules are conferred by .required */
}

或者将该选择器添加到 .required block 中。此外，您还必须将类 required-for-executed 添加到标记中的每个相应标签中(即不要使用 javascript 执行此操作)。