javascript - jquery 在点击时显示警报

Question

我在页面顶部有一个简单的登录，当用户在我的 json 文件中输入他们的 ID 时，他们的名字会出现在欢迎警报中(欢迎警报在准备就绪时可用，当用户输入时，名字会出现在里面登录)。我希望隐藏警报，但是当用户输入他们的代码时(没有用户名，只有代码)，此警报会与名称一起出现。

这是登录文本和按钮:

<div class="alert alert-info"><input type="text" id="userName" value> <button type="button" id="loginbtn" class="btn btn-primary btn-md">Login</button></div>

这是警报:

<div class="alert alert-success" id="loginalert"<strong>Welcome</strong></div>

这里是让相应名称出现的js:

 $(document).ready(function() {
$("#loginbtn").click(function(event){
//console.log("clicked login");
   $.getJSON('result.json', function(jd) {
      var id = $('#userName').val();
      //console.log(id);
      for (var i=0; i<jd.user.length; i++) {
        if (jd.user[i].ID == id) {
          $('#loginalert').html('<p> Welcome: ' + jd.user[i].name + '</p>');
        }
      }
   });
}); });

json 文件包含用户 id(这是现在的代码):001

他们的名字

当代码被输入到登录文本框时，他们的名字会出现在页面上以指示哪个用户已经登录

我也想知道..如果没有与我包含在我的 json 中的四个对应的 ID，有没有办法让这个警报出现而不是登录警报，这就像你输入了一个无效代码 -

<div class="alert alert-danger"> <strong>Danger!</strong> Indicates dangerous or potentially negative action.</div>

(也将在页面加载/就绪时隐藏)

谁能帮帮我吗？

亲切的问候

Answer 1

试试这个:我已经修改了你的脚本。

$(document).ready(function() {
//Hide alert when page loads
$("#loginalert").hide();    
    $("#loginbtn").click(function(event){
    //console.log("clicked login");
       $.getJSON('result.json', function(jd) {
          var id = $('#userName').val();
          //console.log(id);
          for (var i=0; i<jd.user.length; i++) {
            if (jd.user[i].ID == id) {
              $('#loginalert').html('<p> Welcome: ' + jd.user[i].name + '</p>');      
              //show the alert after loading the information
                $("#loginalert").stop().fadeIn('slow').animate({ opacity: 1.0 }, 3000).fadeOut('slow', function () {
                $('#contact').fadeIn('slow');
            });
            }
          }
       });
    }); 
});

对于错误消息尝试:

修改你的div，

    <div class="alert alert-danger" id="ErrorMessageAlert"> <strong>Danger!</strong> Indicates dangerous or potentially negative action.</div>

此后再次将您的脚本修改为:

$(document).ready(function() {
//Hide alert when page loads
$("#loginalert").hide();    
$("#ErrorMessageAlert").hide();
    $("#loginbtn").click(function(event){
    //console.log("clicked login");
       $.getJSON('result.json', function(jd) {
          var id = $('#userName').val();
          //console.log(id);
          for (var i=0; i<jd.user.length; i++) {
            if (jd.user[i].ID == id) {
              $('#loginalert').html('<p> Welcome: ' + jd.user[i].name + '</p>');      
              //show the alert after loading the information
                $("#loginalert").show();
            }else
            {
                $("#ErrorMessageAlert").show();
            }

            );
            }
          }
       });
    }); 
});