javascript - 根据 HTML 表单 ID 值动态设置 jquery 选择器

Question

我在一页上有多个表单，这些表单的 ID 有所不同。 ID 的不同之处在于附加的 _0、_1、_2 等(每个 do 循环由 Rails 创建的索引值)。

我正在尝试验证这些表单，但是为了保持代码干燥，我希望表单选择器是动态的。我需要以某种方式获取表单的 ID 值(“_0”)并将其添加到 jQuery 选择器中。

这个Fiddle给出了我现在如何解决这个问题的例子。jQuery 函数之间的validation() block 内部的代码是相同的。我需要将选择器变量设置为如下所示:

$("new_loan_question_answer_"+i)

我不确定如何将 HTML 表单中的 _0 或 _1 传递给 jQuery 函数。

表单 html

<div class="form">
    <p>Question #1 text</p>
    <form id="question_response_0">
        <input type="text" name="response"></input>
        <input type="submit">
    </form>
</div>
<div class="form">
    <p>Question #2 text</p>
    <form id="question_response_1">
        <input type="text" name="response"></input>
        <input type="submit">
    </form>
</div>

jquery

$(function () {
    $("#question_response_0").validate({
        rules: {
            "response": {
                required: true
            }
        },
        messages: {
            "response": {
                required: 'This field is required'
            }
        },
        errorPlacement: function (error, element) {
            error.insertAfter(element.parent());
        }
    });
});

$(function () {
    $("#question_response_1").validate({
        rules: {
            "response": {
                required: true
            }
        },
        messages: {
            "response": {
                required: 'This field is required'
            }
        },
        errorPlacement: function (error, element) {
            error.insertAfter(element.parent());
        }
    });
});

Answer 1

不要为增量 id 属性而烦恼。维护起来很痛苦，并且会导致保持代码干燥的问题。这种事情正是类的发明目的:

<div class="form">
    <p>Question #1 text</p>
    <form class="question_response"> <!-- < use a common class on the form -->
        <input type="text" name="response"></input>
        <input type="submit">
    </form>
</div>
<div class="form">
    <p>Question #2 text</p>
    <form class="question_response"> <!-- < use a common class on the form -->
        <input type="text" name="response"></input>
        <input type="submit">
    </form>
</div>

现在您只需将 validate 附加到 .question_response 类。不幸的是，在实例化包含多个表单元素的选择器时，验证插件中的错误突出显示(以及可能的其他功能)似乎会出现错误，因此您需要依次循环每个表单:

$(function () {
    $('.question_response').each(function() {
        $(this).validate({
            rules: {
                "response": {
                    required: true
                }
            },
            messages: {
                "response": {
                    required: 'This field is required'
                }
            },
            errorPlacement: function (error, element) {
                error.insertAfter(element.parent());
            }
        });
    });
});

Example fiddle