.单击json中的show alert

.click show alert from json

本文关键字：alert show 中的 json 单击      更新时间：2023-09-26

我有一个按钮和文本框，用于读取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或者什么也没输入？

非常感谢

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

$(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')
                }
            }
        })
    })
});
相关文章：