Question

我只想选择＆＃34; p＆＃34;在所选输入之后，但我尝试了很多组合，但似乎都没有。

HTML：

<div id="formulario">
    <form id="contacto" action="" method="post">
        <label>Nombre </label>
        <input id="name" type="text" name="name"><br>
        <p class="error">Campo incorrecto</p>
        <label>Email</label> 
        <input id="email" type="text" name="email"><br>
        <p class="error">Campo incorrecto</p>
        <label>Teléfono</label> 
        <input id="phone" type="text" name="phone"><br>
        <p class="error">Campo incorrecto</p>
        <label>Mensaje</label>
        <textarea id="msg"name="message"></textarea><br>
        <input id="submit" type="submit" name="submit" value="Enviar">
    </form>
</div>

CSS：

.error {
    display: none;
}      

.error_show {
    color: red;
}

jQuery的：

$("#contacto").submit(function(event) {
    var form_data = $("#contacto").serializeArray();
    var error_free = true;
    for (var input in form_data) {
        var element = $(form_data[input]['name']);
        var valid = element.hasClass("valid");
        var error_element = --->PROBLEM HERE<---
        if (!valid) {
            error_element.removeClass("error").addClass("error_show");         
            error_free = false;
        }
        else {
            error_element.removeClass("error_show").addClass("error");
        }
    }
    if (!error_free) {
        event.preventDefault(); 
    }
});

我无法使用该课程，因为它可能是＆＃34;错误＆＃34;或＆＃34; error_show＆＃34;。

Answer 1

您可以使用element.next().next()，但强制您始终将输入放在旁边。

最好的方法是根据输入名称为每个p设置一个特定的类名，然后在循环中动态生成它以使用jQuery选择器选择它

HTML

<div id="formulario">
<form id="contacto" action="" method="post">
    <label>Nombre </label>
    <input id="name" type="text" name="name"><br>
    <p class="error error_name">Campo incorrecto</p>
    <label>Email</label> 
    <input id="email" type="text" name="email"><br>
    <p class="error error_email">Campo incorrecto</p>
    <label>Teléfono</label> 
    <input id="phone" type="text" name="phone"><br>
    <p class="error error_phone">Campo incorrecto</p>
    <label>Mensaje</label>
    <textarea id="msg"name="message"></textarea><br>
    <input id="submit" type="submit" name="submit" value="Enviar">
</form>

JS

for (var input in form_data){
    var element = $(form_data[input]['name']);
    var valid = element.hasClass("valid");
    var error_element = $("error_" + element.attr('name'));
    if (!valid) { error_element.removeClass("error").addClass("error_show"); error_free=false; }
    else { error_element.removeClass("error_show").addClass("error");}
}

Answer 2

由于p标记是输入的下一个兄弟，您只需使用.nextAll()和.first()选择器与输入元素上下文：

var valid=element.hasClass("valid");
var error_element= element.nextAll('p').first();

Answer 3

试试这段代码：

var error_element= element.next(); // To select the very next element

此外，如果您增加元素或更准确，您可以选择以下内容：

var error_element= element.next().find('p.error');

Answer 4

好的，我发现问题，断裂线是每个输入的下一个兄弟，所以这会搞乱段落的选择，我将尝试解决它。

选择存储在变量中的元素的第一个兄弟

4 个答案: