0
我的代码：超出范围的变量？
<html>
<head>
<script type="text/JavaScript" src="jquery-1.3.2.min.js"></script>
<script type="text/JavaScript" src="jquery.center.js"></script>
<script type="text/JavaScript">
$(document).ready(function(){
$('a').click(function(){
popup_AskYN("Want me to tell you what 1 + 1 is?",function(){
//popup_Info("It's 2, silly!");
},function(){
//popup_Info("I didn't want to, anyway!");
});
});
});
function popup_AskYN(msg,yes_fn,no_fn){
$('body').append("<div id='popup'><p>"+msg+"</p><a id='popup_yes' href='#'>Yes!</a><a href='#' id='popup_no'>No.</a></div>");
var yes_button = $('#popup_yes:last');
var no_button = $('#popup_no:last');
var popup = $('#popup:last');
popup.center();
yes_button.click(yes_fn);
no_button.click(no_fn);
yes_button.click(function(){
popup.fadeOut('fast').remove();
});
no_button.click(function(){
popup.fadeOut('fast').remove();
});
}
function popup_Info(msg,callback){
$('body').append("<div id='popup'><p>"+msg+"</p><a id='popup_ok' href='#'>Ok.</a></div>");
var ok_button = $('#popup_ok:last');
var popup = $('#popup:last');
popup.center();
ok_button.click(callback);
ok_button.click(function(){
popup.fadeOut('fast',function(){ $(self).remove(); });
});
}
</script>
<style type="text/css">
#popup {
position:absolute;
border:1px solid black;
}
#popup a {
margin:10px;
}
</style>
</head>
<body>
<a href="#">Launch the popup!</a>
</body>
现在这个工程well..except时，我有一个以上的弹出窗口。我缩小到的是什么时候 - 我创建了一个新的弹出窗口，它改变了yes_button，no_button，ok_button和popup的值。所以当前面的弹出窗口尝试使用这些变量时，它们都指向新的弹出窗口而不是当前的弹出窗口。因为所有弹出窗口都有相同的ID，所以我没有任何“唯一”来标识每个窗口。我想简单地存储选择器就足够了，但那不起作用。我能在这里做什么？
编辑，添加适当的ID，但仍然没有工作...：
<html>
<head>
<title>Call backs</title>
<script type="text/JavaScript" src="jquery-1.3.2.min.js"></script>
<script type="text/JavaScript" src="jquery.center.js"></script>
<script type="text/JavaScript">
$(document).ready(function(){
$('a').click(function(){
popup_AskYN("Want me to tell you what 1 + 1 is?",function(){
//popup_Info("It's 2, silly!");
},function(){
//popup_Info("I didn't want to, anyway!");
});
});
});
var popup_AskYNId = 0;
var popup_InfoId = 0;
function popup_AskYN(msg,yes_fn,no_fn){
popup_AskYNId = popup_AskYNId + 1;
$('body').append("<div class='popup' id='"+popup_AskYNId+"popup_AskYN'><div class='popup_inner'><p>"+msg+"</p></div><div class='popup_options'><a class='popup_yes' id='"+popup_AskYNId+"popup_yes_AskYN' href='#'>Yes!</a><a href='#' class='popup_no' id='"+popup_AskYNId+"popup_no_AskYN' >No.</a></div></div>");
popup = $('#'+popup_AskYNId+'popup_AskYN');
yes_button = $('#'+popup_AskYNId+'popup_yes_AskYN');
no_button = $('#'+popup_AskYNId+'popup_no_AskYN');
popup.center();
yes_button.click(yes_fn);
no_button.click(no_fn);
yes_button.click(function(){
popup.fadeOut('fast').remove();
});
no_button.click(function(){
popup.fadeOut('fast').remove();
});
}
function popup_Info(msg,callback){
$('body').append("<div id='popup'><div id='popup_inner'><p>"+msg+"</p></div><div id='popup_options'><a id='popup_ok' href='#'>Ok.</a></div></div>");
ok_button = $('#popup_ok:last');
popup = $('#popup:last');
popup.center();
ok_button.click(callback);
ok_button.click(function(){
popup.fadeOut('fast',function(){ $(self).remove(); });
});
}
</script>
<style type="text/css">
.popup {
position:absolute;
border:1px solid black;
padding:3px;
}
.popup_inner {
border:1px solid black;
padding:10px;
}
.popup_options {
margin:0 auto;
}
.popup_options a {
border:1px solid black;
margin-top:3px;
margin-left:3px;
height:15px;
width:75px;
float:right;
text-align:center;
font-family:tahoma;
font-size:0.8em;
text-decoration:none;
line-height:14px;
}
</style>
</head>
<body>
<a href="#">Launch the popup!</a>
</body>
</html>
溶液发现，但是我修改了一点点，这样yes和no受理功能，如老版本..
$(function() {
$('a').click(function(e) {
e.preventDefault();
var num1 = Math.floor(Math.random()*11),
num2 = Math.floor(Math.random()*11);
popup_AskYN(
"Want me to tell you what 1 + 1 is?",
function(){
$('body').append('its 2');
},function(){
$('body').append('Fine.');
});;
});
$('.popup_yes').live('click', function(e) {
e.preventDefault();
$(this).closest('.popup').fadeOut('fast', function() {
$(this).remove();
});
});
$('.popup_no').live('click', function(e) {
e.preventDefault();
$(this).closest('.popup').fadeOut('fast', function() {
$(this).remove();
});
});
});
function popup_AskYN(msg, yes, no){
$('body').append("<div class='popup'><div class='popup_inner'><p>"+msg+"</p></div><div class='popup_options'><a class='popup_yes' href='#'>Yes!</a><a href='#' class='popup_no'>No.</a></div></div>");
var yes_button = $('.popup_yes:last');
var no_button = $('.popup_no:last');
var popup = $('.popup:last');
yes_button.click(yes);
no_button.click(no);
}
ID如何不起作用？我究竟做错了什么？ – Prodigga 2010-01-09 21:56:04
我刚试过，同样的问题仍然存在。我在弹出窗口打印出弹出窗口的ID，停止居中并将其放置在相对位置：相对的，它们被放置在不同的行中。不管我按哪个按钮，最后一个弹出窗口，只有最后一个弹出窗口才会消失。 – Prodigga 2010-01-09 21:59:58
我将代码添加到了我的原始答案中，以向您展示我的意思。使用ID不起作用，因为正如slebetman指出的那样，每个ID必须是唯一的。事实证明，这里没有必要使用ID，因此只需将它们更改为类即可。 – 2010-01-10 00:33:18