[英]How to get a .click button to hide an alert box
I have been creating a page out of json, and there is a simple log in. When the user ID and name matches that of my json file: 我一直在用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"
}
]
}
So the name is almost like user name and the id is like password, when these match an alert pops up at the top of page containing the user's picture, name etc and if an invalid user tries to enter their details(not part of the json or username and password does not match an invalid alert appears) I also have a hide button that appears welcome user alert, i have it included but when i click it and try to add a .click hide() function this will not work. 因此,名称几乎就像用户名,而id就像密码,当这些匹配时,在页面顶部弹出一个警报,其中包含用户的图片,姓名等,并且如果无效的用户尝试输入其详细信息(不是json的一部分)或出现用户名和密码不匹配的无效警报)我还有一个隐藏按钮,其中显示欢迎用户警报,我已将其包含在内,但是当我单击它并尝试添加.click hide()函数时,它将不起作用。
This is my script so far including the button, in the script you will see this as part of the login alert: 到目前为止,这是我的脚本,包括按钮,在脚本中,您将看到此作为登录警报的一部分:
<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');
}
}); }); });
So i need to make the button actually hide the #loginalert 所以我需要使按钮实际上隐藏#loginalert
many thanks guys 非常感谢你们
You can just delegate event: 您可以委托事件:
$('#loginalert').on('click', '#btnhide', function(e){
$(e.delegateTarget).hide(); // or `$('#loginalert').hide()`
});
I got this to work.. please see below: 我有这个工作..请看下面:
$("#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.