Question

这是我的JQUERY CODE：

$("body").on("click keypress", "#admin-username",function(){
    if($("#admin-username").hasClass("error")){
        $("#admin-username").removeClass("error");
        setTimeout("$('.message').slideUp('slow');", 50);
    }
});

我使用了一个id #admin-username，即在上面的JQuery代码中只有一个id

在我的前端代码中，我有3个输入框

1。）admin-username 2.）admin-email 3.）admin-password

然而我想要实现这样的目标

$("body").on("click keypress", "#admin-username, #admin-password, #admin-email",function(){
    if($("#admin-username").hasClass("error")){
        $("#admin-username").removeClass("error");
        setTimeout("$('.message').slideUp('slow');", 50);
    }
});

但如果我使用多个id这样的话，那么默认它只适用于第一个id，#admin-username

有人能在这里为我提供解决方案吗？

Answer 1

您的选择器是正确的，但您需要使用 this - 在回调函数中访问引发事件的元素

$("body").on("click keypress", "#admin-username, #admin-password, #admin-email",function()
        {
            if($(this).hasClass("error"))
                {
                    $(this).removeClass("error");
                    setTimeout(function() {
                      $('.message').slideUp('slow');
                     }, 50);
                }
        });

还使用回调函数“更正”了setTimeout。

Answer 2

使用this变量选择当前点击/按键的元素

$("body").on("click keypress", "#admin-username, #admin-password, #admin-email",function()
        {
            if($(this).hasClass("error"))
                {
                    $(this).removeClass("error");
                    setTimeout(function(){$('.message').slideUp('slow');}, 50);//here you should select the message div relative to the variable "this" like $(this).parent().find('.message').slideUp('slow');
                }
        });

Answer 3

首先，你可以在你的fontend代码的三个输入中添加相同的类，让我们说adminInput，你可以做这样的事情来消除你正在进行的测试，

$("body").on("click keypress", ".adminInput.error",function(e)
    { var $this = $(this);

                $this.removeClass("error");
                 setTimeout(function(){$('.message').slideUp('slow');}, 50);

    });

你可以随时做点什么

$("#admin-password,#admin-username,#admin-email").click(function(e){ 
 var $this = $(this);       
 if($this.hasClass('error')){
       $this.removeClass("error");
       setTimeout(function(){$('.message').slideUp('slow');}, 50);
    }  
});

或

$("body").on("click keypress", "#admin-username,#admin-password,#admin-email",function(){
var $this = $(this);   
if($this.hasClass("error")){
    $this.removeClass("error");
    setTimeout(function(){$('.message').slideUp('slow');}, 50);
}
});

我修改了代码，如果你想要，你可以测试任何ID上的错误类，而不仅仅是用户名

Answer 4

您可以像这样以管理员身份开始定位所有ID。而不是文档，你可以有一个容器类/ id放在你的元素。

Demo on fiddle

$(document).on('click keypress', '[id^=admin-]', function() {
  var $this = $(this);

  if ($this.hasClass('error')) {
    // do something
  }
});

如何使用JQUERY在ON函数中添加多个ID

4 个答案: