Question

我在表单提交到服务器时会出现错误div，

<p>
    <input id="first_name" class="form-control" type="text" name="first_name" onkeyup="remove_error()" placeholder="First Name"> \
    <span id="error_first_name" class="err alert alert-danger">
        The first name may only contain letters.
        <br>
        The first name must be at least 2 characters.
    </span>
</p>

我有这段代码：

$("#first_name").keyup(function(e)
{
    $("#error_first_name").fadeOut();
});

我打算将其改为

<input id="first_name" class="form-control" type="text" name="first_name" onkeyup="remove_error()"placeholder="First Name">

这样我就可以调用一个函数来删除同一个div中的错误＆＃39; err＆＃39;类。如果我输入1到1的所有输入项目，这是可行的，我怎样才能使它成为我可以调用并删除所述div的函数？

    function remove_error()
    {
        $(this).next(".err").fadeOut(); //get next div with err class and fadeout
    }

Answer 1

最好不要使用内联事件处理程序。您可以使用文本框的公共类，并执行：

$(".commonClass").keyup(function(e){
  $(this).next(".err").fadeOut();
});

如果必须使用内联处理程序，则应使用this关键字传递对该元素的引用：

<input id="first_name" class="form-control" type="text" name="first_name" onkeyup="remove_error(this)"placeholder="First Name">

你可以在函数中使用它：

 function remove_error(elm){
    $(elm).next(".err").fadeOut(); //get next div with err class and fadeout
}

阅读：Why is inline event handler attributes is a bad idea in modern semantic HTML?

Answer 2

你可以为你的元素定义一个类，它是验证器，然后使用兄弟来淡化keyup上的validator元素

$(".validate").keyup(function (e) {
    console.log($(this).siblings('.validator'));
    $(this).siblings('.validator').fadeOut();
});

检查这个小提琴

http://jsfiddle.net/mfarouk/6vgnfam7/

在文本框中键入时，JQuery隐藏错误div

2 个答案: