[英]How to get a .click button to hide an alert box
我一直在用json创建页面,并且有一个简单的登录信息。当用户ID和名称与我的json文件的名称匹配时:
{
"user":[
{
"ID" : "001",
"imgpath":"image/zara.jpg",
"message": " , We have new iphones avaiable",
"name": "Zara Ali"
},
{
"ID" : "002",
"imgpath":"image/iphone5.jpg",
"prefer": " Loves macs",
"name": "Laura Ali"
},
{
"ID" : "003",
"imgpath":"image/iphone5.jpg",
"message": " Loves ipods",
"name": "Courtney Ali"
},
{
"ID" : "004",
"imgpath":"image/iphone5.jpg",
"message": " Loves Ipads",
"name": "Max Ali"
}
]
}
因此,名称几乎就像用户名,而id就像密码,当这些匹配时,在页面顶部弹出一个警报,其中包含用户的图片,姓名等,并且如果无效的用户尝试输入其详细信息(不是json的一部分)或出现用户名和密码不匹配的无效警报)我还有一个隐藏按钮,其中显示欢迎用户警报,我已将其包含在内,但是当我单击它并尝试添加.click hide()函数时,它将不起作用。
到目前为止,这是我的脚本,包括按钮,在脚本中,您将看到此作为登录警报的一部分:
<button type="button" id="btnhide" class="btn btn-primary btn-md">Hide</button>
:
$(document).ready(function() {
//Hide alert when page loads
$("#loginalert").hide();
$("#invalid").hide();
$("#loginbtn").click(function(event){
//console.log("clicked login");
$.getJSON('result.json', function(jd) {
var id = $('#userName').val();
var name = $('#userName2').val();
var valid = false;
//console.log(id);
for (var i=0; i<jd.user.length; i++) {
if ((jd.user[i].ID == id) && (jd.user[i].name == name)) {
valid=true;
$('#loginalert').html('<img src="' + jd.user[i].imgpath + '"><br><p> Welcome: ' + jd.user[i].name + '</p><button type="button" id="btnhide" class="btn btn-primary btn-md">Hide</button>');
//show the alert after loading the information
$("#loginalert").stop().fadeIn('slow').animate({ opacity: 1.0 }, 3000)('slow', function () {
//$("#invalid").hide();
});
}
}
if (!valid) {
$('#invalid').fadeIn('slow');
}
}); }); });
所以我需要使按钮实际上隐藏#loginalert
非常感谢你们
您可以委托事件:
$('#loginalert').on('click', '#btnhide', function(e){
$(e.delegateTarget).hide(); // or `$('#loginalert').hide()`
});
我有这个工作..请看下面:
$("#loginalert").stop().fadeIn('slow').animate({ opacity: 1.0 }, 3000)
$('#invalid').hide();
$('#btnhide').on('click', function(e){
e.preventDefault();
$('#loginalert').hide();
});
}
}
if (!valid) {
$('#invalid').fadeIn('slow');
$('#loginalert').hide();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.