未定义 javascript/jquery 变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5451856/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-25 17:14:47 来源:igfitidea点击:
javascript/jquery variable not defined
提问by Tommy Arnold
the script has 5 panels 3 of which are selectable and trigger the onclick event below.
该脚本有 5 个面板，其中 3 个是可选的，并触发下面的 onclick 事件。
it works fine and even alerts the value of "selectedID"
它工作正常，甚至会提醒“selectedID”的值
but when i try to change the values on the inputs and trigger the on click, keyup it gives me the error "selectedID not defined"
但是当我尝试更改输入上的值并触发点击时，keyup 它给了我错误“selectedID 未定义”
Here is my JS
这是我的 JS
jQuery(document).ready(function($) {
///////////
$("div.door").click(function () {
resetall();
$("div.door").removeClass("panelselected");
$(this).toggleClass("panelselected");
var selectedID = $(this).attr("id");
alert(selectedID);
$("#customisedoor").fadeIn("slow");
$("#"+selectedID).animate({
height: 118-Number($("#doorheight").val())*2+"px"
}, 200 );
var height = 118-Number($("#doorheight").val())*2;
var topmargin = Number($("#doorheight").val())*2;
$("#"+selectedID).css("margin-top", topmargin+"px");
////////////////////////////IF PANEL 2
if(selectedID === 'panel2'){
$("#panel1").append('<img src="images/draught-skirts/button.png" class="button right appended"/>');
$("#panel3").append('<img src="images/draught-skirts/button.png" class="button left appended"/>');
}
///////////////////////IF PANEL 3
if(selectedID === 'panel3'){
$("#panel2").append('<img src="images/draught-skirts/button.png" class="button right appended"/>');
$("#panel4").append('<img src="images/draught-skirts/button.png" class="button left appended"/>');
}
/////////////////////////
///////////////////////IF PANEL 3
if(selectedID === 'panel4'){
$("#panel3").append('<img src="images/draught-skirts/button.png" class="button right appended"/>');
$("#panel5").append('<img src="images/draught-skirts/button.png" class="button left appended"/>');
}
/////////////////////////
});
$("#doorwidth").keyup(function (){
$("#"+selectedID).animate({
width: $("#doorwidth").val()*2+"px"
}, 200 );
$("#totalwidth").val(
parseInt(300) + parseInt($("#doorwidth").val())
);
});
$("#doorwidth").click(function (){
$("#"+selectedID).animate({
width: $("#doorwidth").val()*2+"px"
}, 200 );
$("#totalwidth").val(
parseInt(300) + parseInt($("#doorwidth").val())
);
});
function calculateheight(){
$("#"+selectedID).animate({
height: 118-$("#doorheight").val()*2+"px"
}, 200 );
height = 118-$("#doorheight").val()*2;
topmargin = $("#doorheight").val()*2;
$("#"+selectedID).css("margin-top", topmargin+"px")
}
$("#doorheight").keyup(function (){
calculateheight();
});
$("#doorheight").click(function (){
calculateheight();
});
function resetall(){
$(".appended").remove();
$(".door").css({'width':'150','height':'118','margin':'0px'});
$(".door").removeClass("panelselected");
$("#doorheight").val(30);
$("#doorwidth").val(75);
$("#totalwidth").val(300+$("#doorwidth").val());
}
$("#reset").click(function () {
//alert("removed");
resetall();
});
//////////////////////////////////////////////////////////////////
});
Full source FROM Firefox
来自 Firefox 的完整源代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- JS -->
<script type="text/javascript" src="plugins/validator/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="plugins/ui/jquery.effects.core.js"></script>
<!-- STYLES -->
<style>
<!-- LAYOUT -->
<!-- SKIRTS -->
.panelContainer{
height:128px;
width:900px;
float:left;
}
.endpanel{
width:150px;
float:left;
height:118px;
background:#BFDDF2;
border:1px solid #7DB8DB;
}
.panel{
width:150px;
bottom:0;
float:left;
height:118px;
background:#BFDDF2;
border:1px solid #7DB8DB;
}
.mid{
border-left:0px;
}
.door:hover{
width:150px;
float:left;
height:118px;
background:#ECF5FB;
border:1px solid #fff;
}
.panelselected{
width:150px;
float:left;
height:118px;
background:#ECF5FB;
border:1px solid #fff;
}
.container{
min-width:150px;
width:auto;
float:left;
margin-top:3px;
height:7px;
}
.button{
width:7px; height:7px;
margin:3px;
}
.left{float:left;}
.right{float:right;}
</style>
</head>
<body>
<div style="width:780px; height:80px;float:left;">
<h3>Please select a panel and customise the width and height to fit under your door step / doorway</h3>
<ul>
<li>Total Draught Skirt Width: <input type="text" disabled id="totalwidth" value="375"/>(CMS) </li>
</ul>
</div>
<!-- CUSTOMISE DOOR -->
<div style="margin-top:20px; min-width:780px; height:80px;float:left;position:relative;">
<div class="endpanel" id="panel1">
<img src="images/draught-skirts/button.png" class="button left"/>
</div>
<div id="panel2" class="panel mid door">
</div>
<div id="panel3" class="panel mid door"></div>
<div id="panel4" class="panel mid door"></div>
<div class="endpanel mid" id="panel5">
<img src="images/draught-skirts/button.png" class="button right"/>
</div>
</div>
<div id="customisedoor" style="clear:both; margin-top:50px;width:400px; height:80px;float:left; display:none;">
<strong>Customise Your Door Panel</strong>
<table>
<tr>
<td>Width</td>
<td>
<input type="number" name="width" id="doorwidth" value="75"/>(CMS)
</td>
</tr>
<tr>
<td>Height From Top of Skirt: </td>
<td>
<input type="number" name="height" id="doorheight" value="30"/>(CMS)
</td>
</tr>
<tr>
<td></td>
<td><input type="button" id="reset" value="Reset"/></td>
</tr>
</table>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
///////////
$("div.door").click(function () {
resetall();
$("div.door").removeClass("panelselected");
$(this).toggleClass("panelselected");
var selectedID = $(this).attr("id");
$("#customisedoor").fadeIn("slow");
$("#"+selectedID).animate({
height: 118-Number($("#doorheight").val())*2+"px"
}, 200 );
var height = 118-Number($("#doorheight").val())*2;
var topmargin = Number($("#doorheight").val())*2;
$("#"+selectedID).css("margin-top", topmargin+"px");
////////////////////////////IF PANEL 2
if(selectedID === 'panel2'){
$("#panel1").append('<img src="images/draught-skirts/button.png" class="button right appended"/>');
$("#panel3").append('<img src="images/draught-skirts/button.png" class="button left appended"/>');
}
///////////////////////IF PANEL 3
if(selectedID === 'panel3'){
$("#panel2").append('<img src="images/draught-skirts/button.png" class="button right appended"/>');
$("#panel4").append('<img src="images/draught-skirts/button.png" class="button left appended"/>');
}
/////////////////////////
///////////////////////IF PANEL 3
if(selectedID === 'panel4'){
$("#panel3").append('<img src="images/draught-skirts/button.png" class="button right appended"/>');
$("#panel5").append('<img src="images/draught-skirts/button.png" class="button left appended"/>');
}
/////////////////////////
});
$("#doorwidth").keyup(function (){
alert("IDis"+selectedID);
$("#"+selectedID).animate({
width: $("#doorwidth").val()*2+"px"
}, 200 );
$("#totalwidth").val(
parseInt(300) + parseInt($("#doorwidth").val())
);
});
$("#doorwidth").click(function (){
alert("IDis"+selectedID);
$("#"+selectedID).animate({
width: $("#doorwidth").val()*2+"px"
}, 200 );
$("#totalwidth").val(
parseInt(300) + parseInt($("#doorwidth").val())
);
});
function calculateheight(){
$("#"+selectedID).animate({
height: 118-$("#doorheight").val()*2+"px"
}, 200 );
height = 118-$("#doorheight").val()*2;
topmargin = $("#doorheight").val()*2;
$("#"+selectedID).css("margin-top", topmargin+"px")
}
$("#doorheight").keyup(function (){
calculateheight();
});
$("#doorheight").click(function (){
calculateheight();
});
function resetall(){
$(".appended").remove();
$(".door").css({'width':'150','height':'118','margin':'0px'});
$(".door").removeClass("panelselected");
$("#doorheight").val(30);
$("#doorwidth").val(75);
$("#totalwidth").val(300+$("#doorwidth").val());
}
$("#reset").click(function () {
//alert("removed");
resetall();
});
//////////////////////////////////////////////////////////////////
});
</script>
</body>
</html>
回答by DashK
selectedID is out of scope - It's defined inside the click(...) function like below...
selectedID 超出范围 - 它在 click(...) 函数中定义，如下所示...
$("div.door").click(function () {
...
var selectedID = $(this).attr("id");
...
});
Which means selectedID only exists inside onClick anonymous function. It's not available in the keyup(...) function.
这意味着 selectedID 仅存在于 onClick 匿名函数中。它在 keyup(...) 函数中不可用。
$("#doorwidth").keyup(function (){
...
// selectedID is not available here, since it was declared inside click(...)
);
You'll want to something like this...
你会想要这样的东西......
jQuery(document).ready(function($) {
// Define selectedID in an outer scope so it's available to all functions inside the closure.
var selectedID;
$("div.door").click(function () {
...
// Instead of declaring selectedID inside this function, use selectedID from the outer scope.
selectedID = $(this).attr("id");
...
});
$("#doorwidth").keyup(function (){
// NULL check for selected ID
if (selectedID) {
$("#"+selectedID).animate({
width: $("#doorwidth").val()*2+"px"
}, 200 );
$("#totalwidth").val(parseInt(300) + parseInt($("#doorwidth").val());
}
);
...
});
回答by Jesse Bunch
You might try moving your var declaration outside of your jQuery click handler:
您可以尝试将 var 声明移到 jQuery 单击处理程序之外：
var selectedID = "";
And changing:
并改变：
var selectedID = $(this).attr("id");
to:
到：
selectedID = $(this).attr("id");
