Question

我有一个按钮和文本框，可以在我的json文件中读取特定用户的ID。如果用户输入001，其名称将显示在警报上，警报将在页面加载时隐藏，但当用户输入此信息时，警报显示 - 欢迎（用户名称和json文件中的详细信息）

这个脚本有效，但是当我等了几秒钟它会消失的时候，我怎么会在它出现时留在页面上呢？

$(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 class="alert alert-success" id="loginalert"> <strong>Welcome!</strong></div>

要求用户输入其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-danger">
<strong>Danger!</strong> Indicates a dangerous or potentially negativeaction.</div>

如果用户输入无效ID或什么都不输入？

非常感谢

Answer 1

删除fadeOut()部分。该代码负责再次隐藏它。

Answer 2

$(function() {
    //Hide alert when page loads
    var alertBox=$("#loginalert");
    alertBox.hide();    
    $("#loginbtn").on('click',function(e){
        //  console.log("clicked login");
        e.preventDefault();
        $.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) {
                   // show the alert if d.user[i].ID is idafter
                    var message= "<p> Welcome: ' + jd.user[i].name + '</p>'";
                    alertBox.html(message).fadeIn('slow',function(){
                        $('#contact').fadeIn('slow')
                    })
                } else {
                    // show the alert if d.user[i].ID is not idafter
                    var message= "<p> Error </p>'";
                    alertBox.html(message).fadeIn('slow')
                }
            }
        })
    })
});

.click显示来自json的警报

2 个答案: