Das Skript hat 5 Felder, von denen 3 auswählbar sind und das unten stehende Onclick-Ereignis auslösen.
es funktioniert gut und meldet sogar den Wert von "selectedID"
aber wenn ich versuche, die Werte auf die Eingänge zu ändern und die auf Klick auslösen, keyup es gibt mir den Fehler "selectedID nicht definiert"
Hier ist mein 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();
});
//////////////////////////////////////////////////////////////////
});Vollständiger Quelltext von 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>
