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

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

Answer 2

默认情况下，您可以添加hidden类，然后通过查询show() - http://api.jquery.com/show/显示所需的一个

，隐藏您的两个提醒表单

<style>
    .hidden{
        display:none;
    } 
</style>

<div class="alert alert-info hidden"><input type="text" id="userName" value> <button type="button" id="loginbtn" class="btn btn-primary btn-md">Login</button></div>
<div class="alert alert-danger hidden"> <strong>Danger!</strong> Indicates dangerous or potentially negative action.</div>

<script>
$.getJSON('result.json', function(jd) {

   var id = $('#userName').val();
   // Defined to keep if match found in loop
   var matchFound = false;

   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 Welcome alert
       $(".alert-info").show();
       matchFound = true;
       break;
     }
   }

  // which means no match found and matchFound is not equal to true
   if( !matchFound ){
      // Show Error alert
      $(".alert-danger").show();
   }
});
</script>

jquery在点击时显示警报

2 个答案: