Javascript 基于HTML表单ID值动态设置jquery选择器

我在一个页面上有几个表单，这些表单的ID不同。ID的不同之处在于附加了_0、_1、_2等（由rails每个do循环创建的索引值）

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

这让我明白了我现在是如何解决这个问题的。 validation（）块内部的代码在jQuery函数之间是相同的。我需要将选择器变量设置为如下所示：

$("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>

例如，检查一下

如果使用事件处理程序调用函数，则事件可能包含所需的信息（提交表单的ID）

---

此处提供了有关事件对象的信息：

可以使用标记中已显示的类，或者将类添加到表单标记中：

$('div.form form').validate({/* options*/}) ;

---

这将包括与选择器匹配的所有表单，每个表单都有自己的验证实例

不必担心增量

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>

---

最好使用类或任何横向选择器来绑定事件，例如：

$（'.form'）.validate（…）有人需要制作一张蝙蝠侠拍罗宾的照片，罗宾问“我如何使用JQuery来选择ID——”，蝙蝠侠用“停止过度使用ID！”打断了他的话。如果整个世界上只有一个这样的东西，就只使用一个ID。每个表单的所有规则都是一样的吗？如果是这样，您可以使用以选择器开头的id:
jQuery（“form[id^='question\u response']）
，但正如其他人所说，我会添加一个class@Katana314我尝试过在这种情况下使用类。似乎jQuery validation（）需要每个表单的ID来知道将错误HTML代码附加到哪个表单。请参阅使用类作为选择器更新的fiddle:@Questifer-Darn；如果JQuery简单地放弃了“对多个元素进行操作”的规则，那就相当令人困惑了。Pete是对的，它仍然可以通过类工作，但您需要通过函数内的适当变量引用而不是ID选择来跟踪表单。在这里使用类似乎不适合我。如果使用类，jQuery validation（）似乎会将错误消息附加到第一个输入。看：@Questifier那太令人失望了。我想我甚至可以在验证中把它作为bug提出来。没问题，很乐意帮忙。
<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>

$(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());
            }
        });
    });
});